Design Guide - Grid

This is the grid that powers our website.

Options:

Fill empty columns:

.row-fill-empty-columns

Keep proportions:

.row-keep-proportions

Minimum two columns:

.row-min-two-columns

One column on lg:

.row-one-column--lg

One column on md:

.row-one-column--md

One column on sm:

.row-one-column--sm

Increase gutter:

.row-gutter-lg

Reduce gutter:

.row-gutter-sm

No gutter:

.row-gutter-none

1/2

Default:

1/2

1/2

Multiple rows:

1/2

1/2

1/2

1/2

Uneven rows:

1/2

1/2

1/2

1/2

1/3

Default:

1/3

1/3

1/3

Multiple rows:

1/3

1/3

1/3

1/3

1/3

1/3

Uneven rows:

1/3

1/3

1/3

1/3

1/3

1/3

1/3

1/3

1/3

1/3

1/3

1/3

Uneven columns:

2/3

1/3

1/3

2/3

1/4

Default:

1/4

1/4

1/4

1/4

Multiple rows:

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

Uneven rows:

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

Uneven columns:

2/4

1/4

1/4

1/4

2/4

1/4

1/4

1/4

2/4

3/4

1/4

1/4

3/4

1/5

Default:

1/5

1/5

1/5

1/5

1/5

Multiple rows:

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

Uneven rows:

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

Uneven columns:

2/5

1/5

1/5

1/5

1/5

2/5

1/5

1/5

1/5

1/5

2/5

1/5

1/5

1/5

1/5

2/5

3/5

1/5

1/5

1/5

3/5

1/5

1/5

1/5

3/5

4/5

1/5

1/5

4/5