Grid
Grids are pretty simple, they only kick-in at the max
breakpoint. There’s 12 available columns, each successive column is stacked next to the other.
You don’t need to fill all the available column slots.
Span multiple columns with the class grid-column--xN
where N
is a number from 1 to 12.
View the code for this example
<div class="grid">
<div class="grid-column--x1"></div>
<div class="grid-column--x11"></div>
</div>
<div class="grid">
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
<div class="grid-column--x1"></div>
</div>
<div class="grid">
<div class="grid-column--x3"></div>
<div class="grid-column--x5"></div>
</div>