Grid

The grid object is used for easy, scalable layouts with good browser support.

Use with:

Grid

The .o-grid object provides us with a column style layout system. It excels at creating quick and flexible layouts complimented with width utilities.

1/2

1/2

1/3

1/3

1/3

1/4

1/4

1/4

1/4

Grid Alignment

Use layout alignment modifiers to change the default alignment of the layout. Left by default, you can use --justify-center or --justify-end.

1/4

1/3

1/3

Gutter Size

Change gutter size with the pre-determined global space modifiers.

1/2

1/2

1/3

1/3

1/3

1/4

1/4

1/4

1/4

Useful notes and reading:

Useful Links:

Related Links: