Grid - Jon’s website

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.

Open this example in a new tab

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>