|
| 1 | +# md-grid-list |
| 2 | + |
| 3 | +`md-grid-list` is an alternative list view that arranges cells into grid-based layout. |
| 4 | +See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html). |
| 5 | + |
| 6 | +<!-- example(grid-list-overview) --> |
| 7 | + |
| 8 | +## Usage |
| 9 | + |
| 10 | +### Setting the number of columns |
| 11 | + |
| 12 | +An `md-grid-list` must specify a `cols` attribute which sets the number of columns in the gird. The |
| 13 | +number of rows will be automatically determined based on the number of columns and the number of |
| 14 | +items. |
| 15 | + |
| 16 | +### Setting the row height |
| 17 | + |
| 18 | +The height of the rows in a grid list can be set via the `rowHeight` attribute. Row height for the |
| 19 | +list can be calculated in three ways: |
| 20 | + |
| 21 | +1. **Fixed height**: The height can be in `px`, `em`, or `rem`. If no units are specified, `px` |
| 22 | +units are assumed (e.g. `100px`, `5em`, `250`). |
| 23 | + |
| 24 | +2. **Ratio**: This ratio is column-width:row-height, and must be passed in with a colon, not a |
| 25 | +decimal (e.g. `4:3`). |
| 26 | + |
| 27 | +3. **Fit**: Setting `rowHeight` to `fit` This mode automatically divides the available height by |
| 28 | +the number of rows. Please note the height of the grid-list or its container must be set. |
| 29 | + |
| 30 | +If `rowHeight` is not specified, it defaults to a `1:1` ratio of width:height. |
| 31 | + |
| 32 | +### Setting the gutter size |
| 33 | + |
| 34 | +The gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property. If no |
| 35 | +units are specified, `px` units are assumed. By default the gutter size is `1px`. |
| 36 | + |
| 37 | +### Adding tiles that span multiple rows or columns |
| 38 | + |
| 39 | +It is possible to set the rowspan and colspan of each `md-grid-tile` individually, using the |
| 40 | +`rowspan` and `colspan` properties. If not set, they both default to `1`. The `colspan` must not |
| 41 | +exceed the number of `cols` in the `md-grid-list`. There is no such restriction on the `rowspan` |
| 42 | +however, more rows will simply be added for it the tile to fill. |
| 43 | + |
| 44 | +### Tile headers and footers |
| 45 | + |
| 46 | +A header and footer can be added to an `md-grid-tile` using the `md-grid-tile-header` and |
| 47 | +`md-grid-tile-footer` elements respectively. |
0 commit comments