Vanilla's default grid has 12 columns and
20px gutters. On large screens, each column takes up 6.3053% of the total width.
- The page structure must be laid out using rows (
- All content must be within columns (
- Only columns should be direct children of a row
Layouts can be created combining rows with different number of columns to an ideal maximum of 4 columns per row. Each column should span a minimum of 3 columns.
Read also: Breakpoints
Prefixes and suffixes add extra horizontal padding to columns, creating some negative space between or around them.
To add some space to the left of the column add a
.prefix-[n] class, where
n is the number of grid units the space should take up.
To add some space to the right add a
By default, prefixes and suffixes only work on top level columns.
Columns can be nested infinitely by adding
.row classes within columns. Basically, just remember that all columns must be wrapped in
.row classes, even when nested.