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>