Grid System

The grid system is composed of 12 columns with a gutter between columns of .33%. We apply border-box so that the border and padding is included in the width of the grid columns.

Grid Sizes

1 of 1

1/1 - 12 columns

1 of 2

1/2 - 6 columns

1/2 - 6 columns

1 of 3

1/3 - 4 columns

1/3 - 4 columns

1/3 - 4 columns

1 of 4

1/4 - 3 columns

1/4 - 3 columns

1/4 - 3 columns

1/4 - 3 columns

Responsive Columns

The grid layout is loosely based on Foundation.

Columns will break down to 100% width at tablet viewport width (768px); to utilize column widths at viewports smaller than this, prefix the class name with 'sm-'.

4 small columns

8 small columns - will keep width constraints, even on small screens.

These classes can be mixed and matched for different widths on smaller and larger screens.

6 small columns, 4 large columns

6 small columns, 4 large columns

12 small columns, 4 large columns