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.