We use a grid to structure our designs. Just like the typography and vertical spacing we use, our grid allows the creation of a consistent horizontal space.


Our grid has 12 columns that can be used in various combinations. It has gutters of 32px above 768px and 16px below 768px. We recommend its use because it has been designed to suit our typography.

Viewport sizes

The grid column widths can be changed using css classes. The default widths we use are:

  • All: 0px and up — (all-{column-span})
  • Extra small: 320px and up — (.xsmall-{column-span})
  • Small: 480px and up — ((.small-{column-span})
  • Medium: 750px and up — ((.medium-{column-span})
  • Large: 960px and up — ((.large-{column-span})
  • Extra large: 1300px and up — ((.xlarge-{column-span})


See the Pen Grid by Co-op digital (@coopdigital) on CodePen.

Centering columns

Columns can be set to centred or uncentered at different viewport sizes.


See the Pen Grid centering by Co-op digital (@coopdigital) on CodePen.

Offsetting columns

Columns can be offset by a specified amount of columns from the left hand side.

See the Pen Column offset by Co-op digital (@coopdigital) on CodePen.

Re-ordering columns

Columns can be re-ordered by pushing and pulling them relative to their base position.

See the Pen Column re-ordering by Co-op digital (@coopdigital) on CodePen.

Collapsed columns

Collapsed columns have their padding removed. Columns can be collapsed individually, or whole rows can be collapsed at once by adding the class .collapse to a column or row.

See the Pen Column collapse by Co-op digital (@coopdigital) on CodePen.

More information

For more information on using the grid, see the front-end toolkit code, try it out using the prototyping kit or see the grid collection on Codepen


Did you find what you were looking for?