API Reference

Grid lists are an alternative to standard list views. Grid lists are distinct from grids used for layouts and other visual presentations.

A grid list is best suited to presenting a homogenous data type, typically images, and is optimized for visual comprehension and differentiating between like data types.

A grid list is a continuous element consisting of tessellated, regular subdivisions called cells that contain tiles (md-grid-tile).

Cells are arrayed vertically and horizontally within the grid.

Tiles hold content and can span one or more cells vertically or horizontally.

Responsive Attributes

The md-grid-list directive supports "responsive" attributes, which allow different md-cols, md-gutter and md-row-height values depending on the currently matching media query (as defined in $mdConstant.MEDIA).

In order to set a responsive attribute, first define the fallback value with the standard attribute name, then add additional attributes with the following convention: {base-attribute-name}-{media-query-name}="{value}" (ie. md-cols-lg="8")

Usage

Basic:

Fixed-height rows:

Fit rows:

Using responsive attributes:

Attributes

Parameter	Type	Description
* md-cols `number`	`number`	Number of columns in the grid.
* md-row-height `string`	`string`	One of CSS length - Fixed height rows (eg. `8px` or `1rem`) `{width}:{height}` - Ratio of width to height (eg. `md-row-height="16:9"`) `"fit"` - Height will be determined by subdividing the available height by the number of rows
md-gutter `string`	`string`	The amount of space between tiles in CSS units (default 1px)
md-on-layout `expression`	`expression`	Expression to evaluate after layout. Event object is available as `$event`, and contains performance information.