Grid

Todo

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xsmall, small, large and xlarge viewport widths.

Fluid

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xsmall, small, large and xlarge viewport widths.

Offset

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xsmall, small, large and xlarge viewport widths.

Auto width

Add any number of auto sizing columns to a row.

Nested grid

Nest grids inside grids inside grids.

2
4
3
1
2

No gutter

Remove the gutter between cells.

1
2
3

Horizontal alignement

Add classes to align cells horizontally.

Vertical alignement

Add classes to align cells vertically.

A line of text
A line of text
Inner content
with 3 lines
of text.
Single line

Cell alignement

Add classes to vertically align cells individually.

bottom
middle
top

Cell distribution

Add classes to distribute cells horizontally.

Re-ordering

Add classes to force a cell move in first or last position.

1
2
3
4
5
6
1
2
3
4
5
6

Reverse

Add grid modifier to inverse columns order.

1
2
3
4
5
6