SCSS Grid

grid.scss

/*------------------------------------*\
#COMPONENTS-GRID
\*------------------------------------*/

.c-grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-column-gap: $space-default;

  @media #{$breakpoint-30} {
    grid-column-gap: $space-40;
    grid-row-gap: $space-default;
  }

  /* Add a clearfix for IE11 and lower */
  @media all and (-ms-high-contrast:none) {
    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }

  /* Fallback: create equal heights of items for non grid browsers like Edge */
  @supports not (display: grid) {
    display: flex;
    flex-flow: row wrap;
  }
  /* End fallback */
}

.c-grid--halves {
  @media #{$breakpoint-20} {
    grid-template-columns: repeat(2, 1fr);

    /* Fallback */
    & > .c-grid__item {
      width: calc(50% - #{$space-default});
    }
    /* End fallback */
  }
}

.c-grid--thirds {
  @media #{$breakpoint-20} {
    grid-template-columns: repeat(3, 1fr);

    /* Fallback */
    & > .c-grid__item {
      width: calc(33% - #{$space-default});
    }
    /* End fallback */
  }
}

.c-grid--sidebar {
  @media #{$breakpoint-20} {
    grid-template-columns: 1fr 15rem;
    grid-column-gap: $space-60;

    /* Fallback */
    & > .c-grid__item:nth-child(odd) {
      width: calc(70% - #{$space-60});
    }

    & > .c-grid__item:nth-child(even) {
      width: calc(30% - #{$space-default});
    }
    /* End fallback */
  }

  @media #{$breakpoint-30} {
    grid-template-columns: 1fr 20rem;
  }
}

.c-grid--single {
  width: 100%;
  margin: auto;
  max-width: $max-column-width;
  display: block;

  /* Fallback */
  & > .c-grid__item {
    width: 100%;
    float: none;
  }
  /* End fallback */
}

.c-grid__item {
  position: relative;

  /* Fallback */
  float: left;
  width: 100%;

  @media #{$breakpoint-20} {
    margin-right: $space-default;
  }

  @supports (display: grid) {
    width: auto !important;
    margin-right: 0 !important;
    float: none !important;
  }

  &:last-child {
    margin-right: 0;
  }
  /* End fallback */
}