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;
}