Skip to main content

Grid layout

Default features

  • 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 main, article, or section. These particular elements are interchangable in your grid layouts depending on HTML semantics to achieve accessibly readable content.

If 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>
        
    

Containers

The grid has a single container with a max width of 1600px plus 5% padding on each side.

        
    <main data-grid="container"></div>
        
    

Rows

Unlike other grids, there is no defined concept of a row. In the MWF grid, a full width (col-12) column is a row.

Columns

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.

        
    
        <section data-grid="container">
            <div data-grid="col-1-5"></div>
            <div data-grid="col-1-5"></div>
            <div data-grid="col-1-5"></div>
            <div data-grid="col-1-5"></div>
            <div data-grid="col-1-5"></div>
        </section>
      
    

A grid of 8 equal sized columns is supported.

        
        <section data-grid="container">
            <div data-grid="col-1-8"></div>
            <div data-grid="col-1-8"></div>
            <div data-grid="col-1-8"></div>
            <div data-grid="col-1-8"></div>
            <div data-grid="col-1-8"></div>
            <div data-grid="col-1-8"></div>
            <div data-grid="col-1-8"></div>
            <div data-grid="col-1-8"></div>
        </section>
      
    

Nesting Columns

Any column can be nested inside any other column. Inside each column you are back to 12 total columns so a grid like this:

        
        <section data-grid="container">
            <div data-grid="col-12">
                <div data-grid="col-6">
                    <div data-grid="col-6"></div>
                    <div data-grid="col-6"></div>
                </div>
                <div data-grid="col-6">
                    <div data-grid="col-6"></div>
                    <div data-grid="col-6"></div>
                </div>
            </div>
        </section>
      
    

Would appear like this:

Padding

Padding can be added to any row using the following properties:

  • pad-2x
  • pad-3x
  • pad-6x
  • pad-12x

Padding is applied to the children columns of the containing grid following MDL guidance.

        
        <section data-grid="container">
            <div data-grid="col-8 pad-2x">
                <div data-grid="col-6"></div>
                <div data-grid="col-6"></div>
            </div>
        </section>
      
    

Responsive

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
  • stack-4
  • stack-3
  • stack-2
         
        <section data-grid="container stack-4">
            <div data-grid="col-6"></div>
            <div data-grid="col-6"></div>
        </section>
      
    

Stack-5 will cause its children to stack at viewport 5 and so on. All columns will stack at viewport 2.