Skip to content

Commit 6262c0b

Browse files
mmalerbajelbourn
authored andcommitted
docs(gird-list): add overview (#2305)
1 parent 444a1f6 commit 6262c0b

File tree

1 file changed

+47
-0
lines changed

1 file changed

+47
-0
lines changed

src/lib/grid-list/OVERVIEW.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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

Comments
 (0)