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>

13 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
  5. The main cost funds would be on the off chance that you discovered a few pieces or did some rescue work yourself, you may spare a few expenses. For instance you may discover an exercise center floor or boards out of an animal dwellingplace barn that you need to nail down on your floor. flooring contractor in grants pass oregon

    ReplyDelete
  6. Obviously, a little floor zone to be secured may just set aside a brief time of effort to finish while a bigger zone might be done after a more extended timespan. Chape

    ReplyDelete
  7. This content is very good, very interesting. Thank you for a good website like this.

    คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete
  8. The Pandemic outbreak has caused too much trouble for the online buyers and big vendors like Amazon. During this Covid-19, Amazon is not the only e-commerce store suffering to increase their shopify app development sales, a majority of other web stores are testing their patience

    ReplyDelete
  9. helooooooooooooooooooooooooooooooooooooooooooooooooooooo

    ReplyDelete

Blogroll

Popular Posts