Updated on: 11 April 2016

Breakpoints and screen widths

There are three breakpoints for different screen widths:

  • Desktop (992px and up) there are 59 x 16px columns
  • Tablet (768px to 991px) there are 47 x 16px columns
  • Mobile (up to 767px) are 100% wide

Simple grid

For simpler page structures, you can create elements at halves, thirds or quarters. Each column has a left margin of 16px and should use a column wrap to group columns into a row.

A simple column cannot be nested within another column. Eg putting a half column inside another half column won't result in a quarter column.

full column

half column

half column

two thirds column

one third column

three quarters column

one quarter column


<div class="wrapper">

    <!-- full column -->
    <div class="col-wrap">
        <div class="col col--md-one col--lg-one">
            <p>full column</p>
        </div>
    </div>
    
    <!-- half columns -->
    <div class="col-wrap">
        <div class="col col--md-half col--lg-half">
            <p>half column</p>
        </div>
        <div class="col col--md-half col--lg-half">
            <p>half column</p>
        </div>
    </div>
    
    <!-- third columns -->
    <div class="col-wrap">
        <div class="col col--md-two-thirds col--lg-two-thirds">
            <p>two thirds column</p>
        </div>
        <div class="col col--md-one-third col--lg-one-third">
            <p>one third column</p>
        </div>
    </div>
    
    <!-- quarter columns -->
    <div class="col-wrap">
        <div class="col col--md-three-quarters col--lg-three-quarters">
            <p>three quarters column</p>
        </div>
        <div class="col col--md-one-quarter col--lg-one-quarter">
            <p>one quarter column</p>
        </div>
    </div>

</div>

Complex grid

To make detailed layouts you can use the full 59 columns individually (or 47 columns on tablet). A column is 16px wide and should use a column wrap to group the columns into a row. Unlike simple columns, complex columns do not have a built in 16px gutter.

10 on medium, 14 on large

36 on medium, 45 on large

10 on medium, 14 on large

35 on medium, 44 on large

10 on medium, 15 on large

15 on medium and large

15 on medium and large

22 on medium, 29 on large


<div class="wrapper">

    <div class="col-wrap">
        <div class="col col--md-10 col--lg-14 margin-left-md--1">
            <p>10 on medium, 14 on large</p>
        </div>
        <div class="col col--md-36 col--lg-45">
            <p>36 on medium, 45 on large</p>
        </div>
    </div>
    
    <!-- spaced using margin utilities -->
    <div class="col-wrap">
        <div class="col col--md-10 col--lg-14 margin-left-md--1">
            <p>10 on medium, 14 on large</p>
        </div>
        <div class="col col--md-35 col--lg-44 margin-left-md--1">
            <p>35 on medium, 44 on large</p>
        </div>
    </div>
    
    <!-- nesting complex columns -->
    <div class="col-wrap">
        <div class="col col--md-15 col--lg-15 margin-left-md--1">
            <p>10 on medium, 15 on large</p>
        </div>
        <div class="col col--md-22 col--lg-29">
            <div class="col col--md-11 col--lg-14">
                <p>15 on medium and  large</p>
            </div>
            <div class="col col--md-11 col--lg-15">
                <p>15 on medium and  large</p>
            </div>
        </div>
        <div class="col col--md-10 col--lg-15">
            <p>22 on medium, 29 on large</p>
        </div>
    </div>

</div>

Column offset

30 offset on medium, 40 offset on large

10 on medium, 14 on large

36 on medium, 45 on large


<div class="wrapper">

    <!-- single column with offset -->
    <div class="col-wrap">
        <div class="col col--md-offset-30 col--lg-offset-40 col--md-17 col--lg-19">
            <p>30 offset on medium, 40 offset on large</p>
        </div>
    </div>
    
    <!-- multiple columns with offset -->
    <div class="col-wrap">
        <div class="col col--md-offset-1 col--lg-offset-1 col--md-15 col--lg-15">
            <p>10 on medium, 14 on large</p>
        </div>
         <div class="col col--md-offset-16 col--lg-offset-29 col--md-15 col--lg-15">
            <p>36 on medium, 45 on large</p>
        </div>
    </div>

</div>