Grid

A 12–column grid system for handling layout. The grid is responsive, mobile-first and built on CSS grid.

Defining a basic grid

Grids can have any number of columns from 1 through 12. Just add a column count modifier class like columns3.

<div class="Grid columns3">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Multiple rows

Grids handle multiple rows automatically. Just add more grid cells and the cells will wrap onto a new row.

<div class="Grid columns3">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Responsive column count

You can define a different column count for each responsive breakpoint by using the 4 breakpoint class prefixes. Begin by defining the desired column count for mobile, then add classes for larger breakpoints as necessary.

* Resize your browser to see the grid adapt.

<div class="Grid columns1 bp1-columns2 bp2-columns4">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Gutter sizes

You can choose from 3 different sized grid gaps using one of three size classes. The default size is size2.

<div class="Grid columns3 size1">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

<div class="Grid columns3 size2">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

<div class="Grid columns3 size3">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Responsive gutter sizes

You can define a different gutter size for each responsive breakpoint by using the 4 breakpoint class prefixes. Begin by defining the desired gutter size for mobile, then add classes for larger breakpoints as necessary.

* Resize your browser to see the grid adapt.

<div class="Grid columns3 size1 bp1-size2 bp2-size3">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Alignment

Use flexbox layout utilities to vertically align grid cells.

Columns will stretch to fill the container

Columns will be aligned at the start

Columns will be center aligned

Columns will be aligned at the end

Columns will be aligned on the baseline

<div class="Grid columns2">
  <div>...</div>
  <div>...</div>
</div>

<div class="Grid columns2 ai-flexStart">
  <div>...</div>
  <div>...</div>
</div>

<div class="Grid columns2 ai-center">
  <div>...</div>
  <div>...</div>
</div>

<div class="Grid columns2 ai-flexEnd">
  <div>...</div>
  <div>...</div>
</div>

<div class="Grid columns2 ai-baseline">
  <div>...</div>
  <div>...</div>
</div>

Nesting

Grids can be infinitely nested inside each other.

<div class="Grid columns2">
  <div>
    <div class="Grid columns2">
      <div>...</div>
      <div>...</div>
    </div>
  </div>
  <div>...</div>
</div>