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-large |
6 | 2.0rem | 1.5rem |
Greater than $breakpoint-large |
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';
@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.