Grid
Responsive 12-column grid system
Demo
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
Accessibility
There are no accessibility recommendations for Grid.