Grid

Responsive 12-column grid system

Demo

This row's columns...

...will auto-span.

These two columns...

...span an explicit number of columns (4 and 8).

See more examples

API

Tag

Name		Type		Content
`m-row`		Custom tag		`m-col` children only
`m-col`		Custom tag		Any

Attributes

Name		Value		Description

For m-row only:

center Boolean attribute Centers the columns in the row.

For m-col only:

`span`	[sm-\|md-\|lg-]1-12	Sets the number of columns to span on a 12 column grid. Use the screen size prefixes to resize on specific screen sizes, e.g. `span="9 sm-12"` span 12 columns on small screens, otherwise 9.
`indent`	[sm-\|md-\|lg-]1-12	Sets the number of columns to indent on a 12 column grid. Use the screen size prefixes to resize on specific screen sizes. Indenting a column by 12 is only useful if you're animating that column back into view.
`order`	[sm-\|md-\|lg-]1-12	Overrides the order of the column in its row. Use the screen size prefixes to reorder columns for specific screen sizes.

Guidelines

Nesting Grids

Grids can be nested inside other grids to create complex responsive layouts. Two or even three Grids deep are normal, but any more than that and your implementation could be poorly designed.

Simpler solutions

Although Grid is very capable, avoid the temptation to use it for everything. Sometimes a utility class is sufficient. Compare the three centered headings below to see how Grid may not always be the right solution:

Example 1

Example 2

Example 3

There are no accessibility recommendations for Grid.