Vanilla framework documentation


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 (.row)
  • All content must be within columns (.col-*)
  • 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

View example of the default grid

Empty columns

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 .suffix-[n] class.

By default, prefixes and suffixes only work on top level columns.

View example of the empty columns within the grid

Nested 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.

View example of the nested columns within the grid