Grid System

The grid system is based on XY Grid from Foundation.

Grid Layout

The grid-x and cell classes are required to establish a 12-column grid. A row can contain multiple cells that span up to 12 columns. See layout below as an example.

For gutters between cells, add grid-margin-x (vertical gutter) and/or grid-margin-y (horizontal gutter) alongside grid-x.

For padding inside cells, add grid-padding-x (vertical padding) and/or grid-padding-y (horizontal padding) alongside grid-x.

Select a grid spacing class below to see its effect on the layout.

Responsive Layout

Use the small-[n] and medium-[n] cell classes to display different layouts between mobile and desktop views. [n] indicates the number of columns (1 to 12) for the cell.

If you use class small-[n] only, the cell layout will be the same for mobile and desktop.

If you use class medium-[n] only, the cell layout will apply to desktop view only. In mobile view, cell will automatically span all 12 columns.

If you use both small-[n] medium-[n], small-[n] will apply to mobile view and medium-[n] will apply to desktop view.

The number pairings below indicate the cell's column width for mobile / desktop.