- Each grid is wrapped in a container fixed at 1600px + 5% padding on each side.
- Each grid has no margin and is aligned center.
- All grid items include border box to allow adding padding without breaking the grid.
- All grid elements have clearfix automatically applied.
- All columns are floated left (unless RTL, then right).
- All columns have a 1px min-height applied to help when all elements inside the column are floated.
- Padding is applied at the row level and will apply to all child columns. Padding can be applied at 4px, 12px, 24px and 48px.
- The base grid is 12 columns but grids of 5 single columns and 8 single columns are also supported.
- Columns can be stacked at a specific breakpoints by applying stack values to the row. All child columns will stack at the same point.
Common grid example
The minimum basic requirements for a 12 column grid spanning 4 equal sized columns with stacking at viewport four is illustrated below.
<main data-grid="container"> <section data-grid="col-12 stack-4"> <div data-grid="col-3"> … </div> <div data-grid="col-3"> … </div> <div data-grid="col-3"> … </div> <div data-grid="col-3"> … </div> </section> </div>
The grid's root element may be
section. These particular elements are interchangable in your grid layouts depending on HTML semantics to achieve accessibly readable content.
main is not used, you must also include an additional
role="main" html attribute to enable "Skip to content" for screen reader users that don't want to hear the navigation on every page refresh.
<article data-grid="container" role="main"> … </div>
The grid has a single container with a max width of 1600px plus 5% padding on each side.
<main data-grid="container"> … </div>
Unlike other grids, there is no defined concept of a row. In the MWF grid, a full width (col-12) column is a row.
The base grid is 12 single columns. col-1 through col-12 each set the column width to their corresponding number out of 12. (col-2 is 2/12).
col-1 col-2 col-3 … col-10 col-11 col-12
A grid of 5 equal sized columns is supported.
A grid of 8 equal sized columns is supported.
Any column can be nested inside any other column. Inside each column you are back to 12 total columns so a grid like this:
Would appear like this:
Padding can be added to any row using the following properties:
Padding is applied to the children columns of the containing grid following MDL guidance.
To force columns to stack at a specific breakpoint, use one of the following properties on the parent. Where the number indicates the breakpoint.
Stack-5 will cause its children to stack at viewport 5 and so on. All columns will stack at viewport 2.