Breakpoints and screen widths

There are three breakpoints for different screen widths:

  • Large screens (more than 1200px) there are 15 columns
  • Desktop (992px to 1199px) there are 15 columns
  • Tablet (768px to 991px) there are 15 columns
  • Mobile (up to 767px) there are 4 columns

Fluid simple grid

For simpler page structures, you can create elements at thirds or fifths. Each column has a left and right margin of 10px 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.

one half column

one half column

one third column

one third column

one third column

two thirds column

one third column

one quarter column

one quarter column

one quarter column

one quarter column

three quarters column

one quarter column

one fifth column

one fifth column

one fifth column

one fifth column

one fifth column

three fifths column

two fifths column

four fifths column

one fifth column


<div class="wrapper">
    <!-- half columns -->
        <div class="col-wrap">
            <div class="col col--fluid-one-half">
                <p style="background-color: grey">one half column</p>
            </div>
            <div class="col col--fluid-one-half">
                <p style="background-color: grey">one half column</p>
            </div>
        </div>
    <!-- third columns -->
    <div class="col-wrap">
        <div class="col col--fluid-one-third">
            <p style="background-color: grey">one third column</p>
        </div>
        <div class="col col--fluid-one-third">
            <p style="background-color: grey">one third column</p>
        </div>
        <div class="col col--fluid-one-third">
            <p style="background-color: grey">one third column</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-two-thirds">
            <p style="background-color: grey">two thirds column</p>
        </div>
        <div class="col col--fluid-one-third">
            <p style="background-color: grey">one third column</p>
        </div>
    </div>
    <!-- fourth columns -->
    <div class="col-wrap">
        <div class="col col--fluid-one-quarter">
            <p style="background-color: grey">one quarter column</p>
        </div>
        <div class="col col--fluid-one-quarter">
            <p style="background-color: grey">one quarter column</p>
        </div>
        <div class="col col--fluid-one-quarter">
            <p style="background-color: grey">one quarter column</p>
        </div>
        <div class="col col--fluid-one-quarter">
            <p style="background-color: grey">one quarter column</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-three-quarters">
            <p style="background-color: grey">three quarters column</p>
        </div>
        <div class="col col--fluid-one-quarter">
            <p style="background-color: grey">one quarter column</p>
        </div>
    </div>
    <!-- fifth columns -->
    <div class="col-wrap">
        <div class="col col--fluid-one-fifth">
            <p style="background-color: grey">one fifth column</p>
        </div>
        <div class="col col--fluid-one-fifth">
            <p style="background-color: grey">one fifth column</p>
        </div>
        <div class="col col--fluid-one-fifth">
            <p style="background-color: grey">one fifth column</p>
        </div>
        <div class="col col--fluid-one-fifth">
            <p style="background-color: grey">one fifth column</p>
        </div>
        <div class="col col--fluid-one-fifth">
            <p style="background-color: grey">one fifth column</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-three-fifths">
            <p style="background-color: grey">three fifths column</p>
        </div>
        <div class="col col--fluid-two-fifths">
            <p style="background-color: grey">two fifths column</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-four-fifths">
            <p style="background-color: grey">four fifths column</p>
        </div>
        <div class="col col--fluid-one-fifth">
            <p style="background-color: grey">one fifth column</p>
        </div>
    </div>
</div>

Fluid complex grid

To make detailed layouts you can use the full 15 columns individually (or 12 columns on tablet). A column is 45px wide and should use a column wrap to group the columns into a row.

8 columns

7 columns

9 columns

6 columns

10 columns

5 columns

11 columns

4 columns

12 columns

3 columns

13 columns

2 columns

14 columns

1 col

7 columns

1 col

7 columns


<div class="wrapper">
    <!-- Complex grid -->
    <div class="col-wrap">
        <div class="col col--fluid-8">
            <p style="background-color: grey">8 columns</p>
        </div>
        <div class="col col--fluid-7">
            <p style="background-color: grey">7 columns</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-9">
            <p style="background-color: grey">9 columns</p>
        </div>
        <div class="col col--fluid-6">
            <p style="background-color: grey">6 columns</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-10">
            <p style="background-color: grey">10 columns</p>
        </div>
        <div class="col col--fluid-5">
            <p style="background-color: grey">5 columns</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-11">
            <p style="background-color: grey">11 columns</p>
        </div>
        <div class="col col--fluid-4">
            <p style="background-color: grey">4 columns</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-12">
            <p style="background-color: grey">12 columns</p>
        </div>
        <div class="col col--fluid-3">
            <p style="background-color: grey">3 columns</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-13">
            <p style="background-color: grey">13 columns</p>
        </div>
        <div class="col col--fluid-2">
            <p style="background-color: grey">2 columns</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-14">
            <p style="background-color: grey">14 columns</p>
        </div>
        <div class="col col--fluid-1">
            <p style="background-color: grey">1 col</p>
        </div>
    </div>
    <div class="col-wrap">
        <div class="col col--fluid-7">
            <p style="background-color: grey">7 columns</p>
        </div>
        <div class="col col--fluid-1">
            <p style="background-color: grey">1 col</p>
        </div>
        <div class="col col--fluid-7">
            <p style="background-color: grey">7 columns</p>
        </div>
    </div>
</div>

Column offset

7 columns

1 offset, 7 columns

1 offset, 6 columns

1 offset, 6 columns


<div class="wrapper">
    <!-- offset examples -->
    <div class="col-wrap">
        <div class="col col--fluid-7">
            <p style="background-color: grey">7 columns</p>
        </div>
        <div class="col col--fluid-offset-1 col--fluid-7">
            <p style="background-color: grey">1 offset, 7 columns</p>
        </div>
        <div class="col col--fluid-offset-1 col--fluid-6">
            <p style="background-color: grey">1 offset, 6 columns</p>
        </div>
        <div class="col col--fluid-offset-1 col--fluid-6">
            <p style="background-color: grey">1 offset, 6 columns</p>
        </div>
    </div>
</div>