I was going through angular-material gridList. You can see the example in codepen here. I want to understand what following attributes means in this example and how to use them. documentation seems silent on it.

md-cols-sm
md-cols-md
md-cols-gt-md
md-row-height-gt-md
md-row-height
md-gutter
md-gutter-gt-sm

I was going through angular-material gridList. You can see the example in codepen here. I want to understand what following attributes means in this example and how to use them. documentation seems silent on it.

md-cols-sm
md-cols-md
md-cols-gt-md
md-row-height-gt-md
md-row-height
md-gutter
md-gutter-gt-sm

• javascript
• css
• angularjs
• material-design
• angular-material

1 Answer 1

You can actually get the meaning of these from angular material docs here:

https://material.angularjs/latest/api/directive/mdGridList

And

https://material.angularjs/latest/layout/options

You may notice here, that, -sm-, -md-, and -lg- are basically media-query-name that are meant to target small, medium, and large devices, respectively.

Now, as per your question,

<md-grid-list md-cols-sm="1" md-cols-md="2" 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">

basically means to create a grid list, which has:

"One" column/grid in small devices (md-cols-sm="1"),

"Two" columns/grids in medium devices (md-cols-md="2") and

"Six" columns/grids in devices greater than 960px wide (md-cols-gt-md="6").

Next, ( md-row-height-gt-md="1:1") means that the Ratio of width to height in devices greater than 960px width should be 1:1.

( md-row-height="2:2") means that the Ratio of width to height should be 2:2.

( md-gutter="12px") means that the amount of space between tiles should be 12 px.

( md-gutter-gt-sm="8px" ) means that the amount of space between tiles for devices greater than 600px width (bigger than phones) should be 8px.