Grid
A grid is used to harmonize negative space in a layout.

Types

Divided

A grid can have dividers between its columns.

You can also use semantic names for columns.

Vertically Divided

A grid can have dividers between rows.

Celled

A grid can have rows divided into cells.

Internally Celled

A grid can have rows divisions only between internal rows.

Content

Rows

A row is a horizontal grouping of columns.

Columns

Columns each contain gutters giving them equal spacing from other columns.

Variations

Floated

A column can sit flush against the left or right edge of a row.

Column Width

A column can vary in width taking up more than a single grid column.

Column Count

A grid can have a different number of columns per row.

Equal Width

A row can automatically resize all elements to split the available width evenly.

Stretched

A row can automatically resize all elements to split the available width evenly.

Padded

A grid can preserve its vertical and horizontal gutters on first and last columns.

Relaxed

A grid can increase its gutters to allow for more negative space.

Colored

A grid row or column can be colored.

Inverted

A grid can be inverted to allow dividers to be seen with a dark background.

Centered

A grid can have its columns centered.

Text Alignment

A grid, row, or column can specify its text alignment.

Vertical Alignment

A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.

Responsive Variations

Containers

A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.

Doubling

A grid can double its column width on tablet and mobile sizes.

Stackable

A grid can have its columns stack on-top of each other after reaching mobile breakpoints.

Reversed

A grid or row can specify that its columns should reverse order at different device sizes.

A grid or row can specify that its columns should reverse order on multiple device sizes.

Device Visibility

A column or row can appear only for a specific device, or screen sizes.

Responsive Width

A column can specify a width for a specific device.

This is the bottom