Skip to content

docs(grid-list): add overview for md-grid-list #2305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 21, 2016
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions src/lib/grid-list/OVERVIEW.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# md-grid-list

`md-grid-list` is an alternative list view that arranges cells into grid-based layout.
See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html).

<!-- example(grid-list-overview) -->

## Usage

### Setting the number of columns

An `md-grid-list` must specify a `cols` attribute which sets the number of columns in the gird. The
number of rows will be automatically determined based on the number of columns and the number of
items.

### Setting the row height

The height of the rows in a grid list can be set via the `rowHeight` attribute. Row height for the
list can be calculated in three ways:

1. **Fixed height**: The height can be in `px`, `em`, or `rem`. If no units are specified, `px`
units are assumed (e.g. `100px`, `5em`, `250`).

2. **Ratio**: This ratio is column-width:row-height, and must be passed in with a colon, not a
decimal (e.g. `4:3`).

3. **Fit**: Setting `rowHeight` to `fit` This mode automatically divides the available height by
the number of rows. Please note the height of the grid-list or its container must be set.

If `rowHeight` is not specified, it defaults to a `1:1` ratio of width:height.

### Setting the gutter size

The gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property. If no
units are specified, `px` units are assumed. By default the gutter size is `1px`.

### Adding tiles that span multiple rows or columns

It is possible to set the rowspan and colspan of each `md-grid-tile` individually, using the
`rowspan` and `colspan` properties. If not set, they both default to `1`. The `colspan` must not
exceed the number of `cols` in the `md-grid-list`. There is no such restriction on the `rowspan`
however, more rows will simply be added for it the tile to fill.

### Tile headers and footers

A header and footer can be added to an `md-grid-tile` using the `md-grid-tile-header` and
`md-grid-tile-footer` elements respectively.