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

Common patterns

There are some special classes to help you build common layout patterns. Instead of deciding how many columns each element should use for different screen sizes, use one of these classes on the grid container, and the child elements will be arranged automatically as long as they have the col class.

50/50

25/75

The default variant of 25/75 split sets the layout only on large screens, stacking both columns on top of each other on small and medium screens. This is usually useful when main large column splits further with nested grid that would require full width of the page on medium screens.

See responsive variant below if you want to keep the split layout on medium screens.

25/75 responsive

Use the responsive variant by adding the .is-split-on-medium class to the row container when you want to keep the split layout on medium screens. This is usually used when the main content part does not split further into columns.

25/25/50

25/25/25/25

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