Grid

Structure

Vanilla has a responsive grid with the following columns and gutters:

• The page structure must be laid out using rows (.grid-row)
• All content must be within columns (.grid-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 containing text should span a minimum of 2 columns.

Read also: Breakpoints

Common patterns

Nested columns

Columns can be nested infinitely by adding .grid-row classes within columns. When nesting, remember to:

• Keep track of the context (available columns), which is equal to the number of columns spanned by the parent element.
• Ensure .grid-col-* classes are direct descendants of .grid-row classes. Failing to do so will result in a broken layout.

Empty columns

To leave gap columns, use grid-col-start-{breakpoint}{index}, e.g.: grid-col-start-large-2.

{breakpoint} options: "small", "medium", "large".

{index} options: an integer between 1 and the available columns.

Please note, specifying a value that exceeds the available number of columns will result in incorrect offsets. This happens because the grid implicitly creates additional columns to accommodate the grid-column-start property. You should always keep track of how many available columns you have, especially when nesting. In the example below, we are indicating we want a div to span 1 column, and start at position 5. This requires 6 total columns inside a div spanning only 2.

Import

To import just this component into your project, copy the snippet below and include it in your main Sass file.

// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;

@include vf-p-grid-8;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.