Jump to main content

Grid


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

Screen size (px) Columns Grid gap (gutters) Outer margins
Less than $breakpoint-small 4 1.5rem 1.0rem
$breakpoint-small - $breakpoint-medium 6 2.0rem 1.5rem
Greater than $breakpoint-medium 12 2.0rem 1.5rem


  • 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/scss/vanilla';
@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