Grid

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

• 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 containing text should span a minimum of 3 columns.

Read also: Breakpoints

Fixed width containers

If you only want to constrain content so it matches the grid's fixed width, you can use the utility .u-fixed-width. It behaves as a grid .row with a single 12 column container inside:

Nested columns

Columns can be nested infinitely by adding .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 .col-* classes are direct descendants of .row classes. Failing to do so will result in a broken layout.

Empty columns

To leave gap columns, use col-start-{breakpoint}{index}, e.g.: 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 3 columns, and start at position 7. This requires 10 total columns inside a div spanning only 4.

Breaking out of the grid

In some cases, there might be a good reason to break out of the constraints of a 12 column grid and allow content to bleed into the page margins. Vanilla provides a separate fluid breakout layout for this purpose.

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;

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

React

You can use grid in React by installing our react-component library and importing Row and Col components.

See the documentation for our React Row component

See the documentation for our React Col component