Grid

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Grid system

col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-2
col-2
col-2
col-2
col-2
col-2
col
col
col
col
col
col
col
col

Equal-width

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Equal-width multi-line

col
col
col
col

Setting one column width

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

Variable width content

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3