A basic grid.
A grid can have dividers between its columns.
You can also use semantic names for columns.
A grid can have dividers between rows.
A grid can have rows divided into cells.
A grid can have rows divisions only between internal rows.
A row is a horizontal grouping of columns.
Columns each contain gutters giving them equal spacing from other columns.
A column can sit flush against the left or right edge of a row.
A column can vary in width taking up more than a single grid column.
A grid can have a different number of columns per row.
A row can automatically resize all elements to split the available width evenly.
A row can automatically resize all elements to split the available height evenly.
A grid can preserve its vertical and horizontal gutters on first and last columns.
A grid can increase its gutters to allow for more negative space.
A grid row or column can be colored.
A grid can be inverted to allow dividers to be seen with a dark background.
A grid can have its columns centered.
A grid, row, or column can specify its text alignment.
A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
A grid can double its column width on tablet and mobile sizes.
A grid can have its columns stack on-top of each other after reaching mobile breakpoints.
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.
A column or row can appear only for a specific device, or screen sizes.
A column can specify a width for a specific device.