AngularJS Material Long Term Support
has officially ended as of January 2022. Read the
End-Of-Life announcement.
<div ng-controller="AppCtrl as appCtrl" ng-cloak>
<md-grid-list
md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row-height="2:2"
md-gutter="12px" md-gutter-gt-sm="8px" >
<md-grid-tile class="gray"
md-rowspan="3" md-colspan="2" md-colspan-sm="1" md-colspan-xs="1">
<md-grid-tile-footer>
<h3>#1: (3r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green">
<md-grid-tile-footer>
<h3>#2: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="yellow">
<md-grid-tile-footer>
<h3>#3: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="blue"
md-rowspan="2">
<md-grid-tile-footer>
<h3>#4: (2r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="red"
md-rowspan="2" md-colspan="2" md-colspan-sm="1" md-colspan-xs="1">
<md-grid-tile-footer>
<h3>#5: (2r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green"
md-rowspan="2" >
<md-grid-tile-footer>
<h3>#6: (2r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
</div>