Grid System

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
Col. 1
Col. 2
Col. 3
Col. 4
Col. 5
Col. 6
Col. 7
Col. 8
Col. 9
Col. 10
Col. 11
Col. 12

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

Super Plush Robe
Wrap up in spa-like comfort.
Linen Shower Curtain Set
Includes 1 linen shower curtain with optional hooks and liner
Classic Core Sheet Set
Includes 1 Flat Sheet, 1 Fitted Sheet, and 2 Pillowcases