Layout

Creating grids

To build a grid, just add

  1. a container with a grid class if without gutter or grid--with-gutter class if with gutter;
  2. a grid-cell class for the columns;
  3. a class for the column's width;

Each grid-cell has a default width of 100%. Groundwork grid supports up to 12 columns.

Contained in grid (grid with no gutter)

.grid-cell
.is-11
.is-1
.is-10
.is-2
.is-9
.is-3
.is-8
.is-4
.is-7
.is-5
.is-6
.is-6
.is-4
.is-4
.is-4
.is-3
.is-3
.is-3
.is-3
.is-2
.is-2
.is-2
.is-2
.is-2
.is-2
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1

Contained in grid--with-gutter (grid with gutter)

.grid-cell
.is-11
.is-1
.is-10
.is-2
.is-9
.is-3
.is-8
.is-4
.is-7
.is-5
.is-6
.is-6
.is-4
.is-4
.is-4
.is-3
.is-3
.is-3
.is-3
.is-2
.is-2
.is-2
.is-2
.is-2
.is-2
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1
.is-1

 

The classes above have a breakpoint of the medium screens. For breakpoints of small and large screens, append --s or --l to the classes. Eg.: is-6--s or is-6--l

Blocks

Blocks in Groundwork have the grid-cell class. They take the full width of their region by default. To create columns, just add the width classes .is-# to your blocks. The layout then is unlimited.