Our grid system has 5 breakpoints and is divided into a number of columns with a corresponding gutter, depending on the breakpoint. A wrapper outside the grid element sets the max-width and outer margins.
Name | Size | Breakpoint Range | Column Count | Column Gutter | Margin |
---|---|---|---|---|---|
Mobile | sml | 0px - 432px | 4 columns | 12px | 24px |
Tablet | med | 433px - 768px | 8 columns | 24px | 24px |
Small Desktop | lrg | 769px - 1024px | 8 columns | 40px | 40px |
Desktop Large | xlg | 1025px - 1440px | 12 columns | 40px | 64px |
Desktop Large+ | xxl | 1441px + | 12 columns | 40px | 64px |
How to use the grid setup
For a full width grid
CSS for the Grid Parent
@include grid__item--spans();
@include grid--areas();
CSS for the Grid Item
@include grid__item--spans($sml: 4, $med: 4, $lrg: 8, $xlg: 12, $xxl: 12);
For items that are on the grid and also act as a grid container for child elements (like product cards)
This is the portion of the code for .card
that relates to it's position as a grid item.
.card {
// 2x grid through 1024px
@include grid__item--spans($sml: 2, $med: 2, $lrg: 4, $xlg: 4, $xxl: 4);
&:nth-child(odd) {
@include grid__item--starts($sml: 1, $med: 1, $lrg: 1, $xlg: 1, $xxl: 1);
}
&:nth-child(even) {
@include grid__item--starts($sml: 3, $med: 3, $lrg: 5);
}
// 3x grid after 1024px
@include at-query($min, $bp-xlg) {
&:nth-of-type(3n+1) {
@include grid__item--starts($xlg: 1, $xxl: 1);
}
&:nth-of-type(3n+2) {
@include grid__item--starts($xlg: 5, $xxl: 5);
}
&:nth-of-type(3n+3) {
@include grid__item--starts($xlg: 9, $xxl: 9);
}
}
}
This is the portion of the code for .card
that relates to it's position as the parent of
.image
, .title
, and .copy
.card {
@include grid--areas(
$col-count-sml: 2,
$col-count-med: 2,
$col-count-lrg: 2,
$col-count-xlg: 4,
$col-count-xxl: 4,
$areas-sml:
"image image"
"title title"
"copy copy",
$areas-med:
"image image"
"title title"
"copy copy",
$areas-lrg:
"image image"
"title title"
"copy copy",
$areas-xlg:
"image image image image"
"title title title title"
"copy copy copy copy",
$areas-xxl:
"image image image image"
"title title title title"
"copy copy copy copy",
);
}
And the child elements
.card__image {
grid-area: image;
}
.card__title {
grid-area: title;
}
.card__copy {
grid-area: copy;
}
Grid Example
This is the output of the above code


