First see Grid list in AngularJS Material UI, There is no documentation over grid list directives. I didn't understand anything because of not having proper documentation. After reading whole material UI documentation, I just tried examples and understood the concept of grid-list.

Grid-list directives


md-colsSets Number of columns
md-cols-smSets Number of columns on devices less than 600px wide.
md-cols-gt-smSets Number of columns on devices greater than 600px wide.
md-cols-mdSets Number of columns on devices between 600px and 960px wide.
md-cols-gt-mdSets Number of columns on devices greater than 960px wide.
md-cols-lgSets Number of columns on devices between 960px and 1200px wide.
md-cols-gt-lgSets Number of columns on devices greater than 1200px wide.

md-row-heightSets row height ratio
md-row-height-smSets row height ratio on devices less than 600px wide.
md-row-height-gt-smSets row height ratio on devices greater than 600px wide.
md-row-height-mdSets row height ratio on devices between 600px and 960px wide.
md-row-height-gt-mdSets row height ratio on devices greater than 960px wide.
md-row-height-lgSets row height ratio on devices between 960px and 1200px wide.
md-row-height-gt-lgSets row height ratio on devices greater than 1200px wide.

md-gutterSets Margin to grid
md-gutter-smSets Margin to grid on devices less than 600px wide.
md-gutter-gt-smSets Margin to grid on devices greater than 600px wide.
md-gutter-mdSets Margin to grid on devices between 600px and 960px wide.
md-gutter-gt-mdSets Margin to grid on devices greater than 960px wide.
md-gutter-lgSets Margin to grid on devices between 960px and 1200px wide.
md-gutter-gt-lgSets Margin to grid on devices greater than 1200px wide.

md-colspanSets column size to grid
md-colspan-smSets column size to grid on devices less than 600px wide.
md-colspan-gt-smSets column size to grid on devices greater than 600px wide.
md-colspan-mdSets column size to grid on devices between 600px and 960px wide.
md-colspan-gt-mdSets column size to grid on devices greater than 960px wide.
md-colspan-lgSets column size to grid on devices between 960px and 1200px wide.
md-colspan-gt-lgSets column size to grid on devices greater than 1200px wide.

md-rowspanSets row size to grid
md-rowspan-smSets row size to grid on devices less than 600px wide.
md-rowspan-gt-smSets row size to grid on devices greater than 600px wide.
md-rowspan-mdSets row size to grid on devices between 600px and 960px wide.
md-rowspan-gt-mdSets row size to grid on devices greater than 960px wide.
md-rowspan-lgSets row size to grid on devices between 960px and 1200px wide.
md-rowspan-gt-lgSets row size to grid on devices greater than 1200px wide.

md-cols Example

This directive is for setting the number of columns in grid system. Observe below highlighted code.    For mobile devices, l column will be there. For tablets 2 columns will be there. For desktops 3 columns will be there.
<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1">
    <md-grid-tile class="green">
      <md-grid-tile-footer>
        <h3>first tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="blue">
      <md-grid-tile-footer>
        <h3>second tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="purple">
      <md-grid-tile-footer>
        <h3>third tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
 </md-grid-list>

md-colspan Example

Here colspan is for setting width of the tile. Here I have given different sizes for below tiles for mobile, tablet, desktop
<md-grid-list md-cols-gt-md="9" md-cols-md="6" md-cols-sm="3" md-gutter="12px" md-row-height="1:1">
    <md-grid-tile class="green" md-colspan-gt-md="6" md-colspan-md="4" md-colspan-sm="1">
      <md-grid-tile-footer>
        <h3>first tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="blue" md-colspan-gt-md="2" md-colspan-md="1" md-colspan-sm="1">
      <md-grid-tile-footer>
        <h3>second tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="purple" md-colspan-gt-md="1" md-colspan-md="1" md-colspan-sm="1">
      <md-grid-tile-footer>
        <h3>third tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
</md-grid-list>

md-rowspan Example

Here rowspan is for setting height of the tile. Here I have given different sizes for below tiles for mobile, tablet, desktop
<md-grid-list md-cols="9" md-gutter="12px" md-row-height="1:1">
    <md-grid-tile class="green" md-rowspan-gt-md="3" md-rowspan-md="2" md-rowspan-sm="2">
      <md-grid-tile-footer>
        <h3>first tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="blue" md-rowspan-gt-md="2" md-rowspan-md="3" md-rowspan-sm="1">
      <md-grid-tile-footer>
        <h3>second tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="purple" md-rowspan-gt-md="1" md-rowspan-md="1" md-rowspan-sm="3">
      <md-grid-tile-footer>
        <h3>third tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
</md-grid-list>

md-gutter Example

This is for setting margin for grids. Here you can observe different margins for mobile, tablet, desktop views
<md-grid-list md-cols="3" md-gutter-gt-md="60px" md-gutter-md="30px" md-gutter-sm="2px" md-row-height="1:1">
    <md-grid-tile class="green">
      <md-grid-tile-footer>
        <h3>first tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="blue">
      <md-grid-tile-footer>
        <h3>second tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="purple">
      <md-grid-tile-footer>
        <h3>third tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
</md-grid-list>

md-row-height Example

This is the ratio of grid width and grid height. Here you can observe different ratios for mobile, tablet, desktop views
<md-grid-list md-cols="6" md-gutter="12px" md-row-height-gt-md="3:1" md-row-height-md="1:3" md-row-height-sm="1:1">
    <md-grid-tile class="green">
      <md-grid-tile-footer>
        <h3>first tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="blue">
      <md-grid-tile-footer>
        <h3>second tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
    <md-grid-tile class="purple">
      <md-grid-tile-footer>
        <h3>third tile</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
</md-grid-list>

7 comments:

  1. does this feature working on android 4.3 and below versions?

    ReplyDelete
    Replies
    1. its not specific to android OS. It is on web and depends on browser

      Delete
  2. Hello I want to display dynamic tiles.i.e height of tile not fixed because we are doing social Networking website height of post will be incremented dynamically

    ReplyDelete
  3. Wasted so much time following this article , please refer https://material.angularjs.org/latest/layout/container
    Layouts are different

    ReplyDelete
  4. how to display title content in next line.
    like title1 title2
    abc xyz
    title3
    123

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts