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
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.
Large screens | Medium screens | Small screens | |
---|---|---|---|
.row--50-50 |
50/50 | 50/50 | 100/100 |
.row--25-75 |
25/75 | 100/100 | 100/100 |
.row--25-75 .is-split-on-medium |
25/75 | 33/66 | 100/100 |
.row--25-25-50 |
25/25/50 | 50/50/100 | 100/100/100 |
.row--25-25-25-25 |
25/25/25/25 | 50/50/50/50 | 100/100/100/100 |
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.