Tiles Design With md-grid-list of AngularJS Material UI

Thursday, 6 August 2015 | Posted by Sample

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-cols	Sets Number of columns
md-cols-sm	Sets Number of columns on devices less than 600px wide.
md-cols-gt-sm	Sets Number of columns on devices greater than 600px wide.
md-cols-md	Sets Number of columns on devices between 600px and 960px wide.
md-cols-gt-md	Sets Number of columns on devices greater than 960px wide.
md-cols-lg	Sets Number of columns on devices between 960px and 1200px wide.
md-cols-gt-lg	Sets Number of columns on devices greater than 1200px wide.

md-row-height	Sets row height ratio
md-row-height-sm	Sets row height ratio on devices less than 600px wide.
md-row-height-gt-sm	Sets row height ratio on devices greater than 600px wide.
md-row-height-md	Sets row height ratio on devices between 600px and 960px wide.
md-row-height-gt-md	Sets row height ratio on devices greater than 960px wide.
md-row-height-lg	Sets row height ratio on devices between 960px and 1200px wide.
md-row-height-gt-lg	Sets row height ratio on devices greater than 1200px wide.

md-gutter	Sets Margin to grid
md-gutter-sm	Sets Margin to grid on devices less than 600px wide.
md-gutter-gt-sm	Sets Margin to grid on devices greater than 600px wide.
md-gutter-md	Sets Margin to grid on devices between 600px and 960px wide.
md-gutter-gt-md	Sets Margin to grid on devices greater than 960px wide.
md-gutter-lg	Sets Margin to grid on devices between 960px and 1200px wide.
md-gutter-gt-lg	Sets Margin to grid on devices greater than 1200px wide.

md-colspan	Sets column size to grid
md-colspan-sm	Sets column size to grid on devices less than 600px wide.
md-colspan-gt-sm	Sets column size to grid on devices greater than 600px wide.
md-colspan-md	Sets column size to grid on devices between 600px and 960px wide.
md-colspan-gt-md	Sets column size to grid on devices greater than 960px wide.
md-colspan-lg	Sets column size to grid on devices between 960px and 1200px wide.
md-colspan-gt-lg	Sets column size to grid on devices greater than 1200px wide.

md-rowspan	Sets row size to grid
md-rowspan-sm	Sets row size to grid on devices less than 600px wide.
md-rowspan-gt-sm	Sets row size to grid on devices greater than 600px wide.
md-rowspan-md	Sets row size to grid on devices between 600px and 960px wide.
md-rowspan-gt-md	Sets row size to grid on devices greater than 960px wide.
md-rowspan-lg	Sets row size to grid on devices between 960px and 1200px wide.
md-rowspan-gt-lg	Sets 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>