Our grid system consists of 12 columns with a 20px gutter. Many of our layouts skip the first and last column, spanning the 10 inner columns of the grid. An example of the 12 column grid is below, along with our other grid layout sizes.
1
2
3
4
5
6
7
8
9
10
11
12
<div class="grid-container">
<div class="col-1">
... content
</div>
</div>
An alternative grid container for content that needs to reach the edge of the page. All the col-x and start-col-x classes still work with this container, but the column numbers are shifted 1 column to the left. A negative margin is still recommended for most content. The bleed columns might get stretched quite far in some browsers.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
max-col
<div class="full-grid-container">
<div class="col-1">
... content
</div>
</div>
use start-col-X to specify the starting grid column.
start-col-2 col-10
<div class="grid-container">
<div class="start-col-2 col-10">
... content
</div>
</div>
start-col-2 col-5
col-5
start-col-2 col-3
start-col-6 col-6
<div class="grid-container">
<div class="start-col-2 col-3">
... content
</div>
<div class="start-col-6 col-6">
... content
</div>
</div>
start-col-2 col-6
start-col-9 col-3
col-6
col-6
col-4
col-8
when there are classes with "mobile-" prefix and screen width is less than 45em (720px), the mobile grid content calsses will override the original class properties
col-12 mobile-start-col-2 mobile-col-10
<div class="grid-container">
<div class="col-12 mobile-start-col-2 mobile-col-10">
... content
</div>
</div>