Grid

The grid system is based off of the Bootstrap grid system, where you have nestable pairings of rows and columns.

• The rows should have a class of row (Bootsrap 3) or flex-row (Flexbox).
• The columns should hold any content and be the only and direct children of the rows.
• Columns should generally have a class of col-{bp}-{w} where bp equals one of the breakpoint prefixes and w is a number between 1 and 12 which corresponds to the amount of space the column should take up in a 12 column grid.

Breakpoints

See Breakpoints

Examples

For additional flexbox options and examples, see Flexbox

Three Columns

Three column layout starting at the Small breakpoint

Two, Four Columns

Two column layout starting at Small. Four columns at Medium

No Gutters, Auto

Auto layout with no gutters

Simple Grid Builder