Center Grid Examples

The center grid evenly distributes the gutter on both sides of the column.

12 columns
2 columns
10 columns
3 columns
9 columns
4 columns
8 column
5 columns
7 columns
6 columns
6 columns
7 columns
5 columns
8 columns
4 columns
9 columns
3 columns
10 columns
2 columns
12 columns
6 columns
6 columns
4 columns
4 columns
4 columns
3 columns
3 columns
3 columns
3 columns
2 columns
2 columns
2 columns
2 columns
2 columns
2 columns

Offset columns

Offsets allow you to create extra white space between columns.

4
4 offset left by 4
4 offset left by 2
4 offset left by 2
6 offset left by 6
4 offset right by 4
4
4 offset right by 2
4 offset right by 2
6 offset right by 6

Push / Pull columns

Pushing & pulling allows you to change the visual ordering of a column.

4 pushed by 8
8 pulled by 4
6 pushed by 6
6 pulled by 6
8 pushed by 4
4 pulled by 8