_grid.css

.grid, .grid-flex {
  &.grid-gutter {
    margin-bottom: 50px;
  }
}

.grid {
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  > .grid-cell {
    :last-child {
      margin-bottom: 0;
    }

    &.horizontal-left {
      justify-self: start;
    }

    &.horizontal-center {
      justify-self: center;
    }

    &.horizontal-right {
      justify-self: end;
    }

    &.vertical-top {
      align-self: start;
    }

    &.vertical-center {
      align-self: center;
    }

    &.vertical-bottom {
      align-self: end;
    }

    &.row-span-2 {
      grid-row: span 2;
    }

    @for $i from 1 to 12 {
      &.span-$i {
        grid-column: span $i;
      }
    }
  }

  &.grid-spacing {
    margin-bottom: 30px;
  }

  &.gap-none {
    grid-gap: 0;
  }

  &.gap-small {
    grid-gap: 20px;
  }

  &.gap-large {
    grid-gap: 40px;
  }

  &.horizontal-left {
    justify-content: start;
  }

  &.horizontal-center {
    justify-content: center;
  }

  &.horizontal-right {
    justify-content: end;
  }

  &.vertical-top {
    align-content: start;
  }

  &.vertical-center {
    align-content: center;
  }

  &.vertical-bottom {
    align-content: end;
  }

  &.horizontal-items-left {
    justify-items: start;
  }

  &.horizontal-items-center {
    justify-items: center;
  }

  &.horizontal-items-right {
    justify-items: end;
  }

  &.vertical-items-top {
    align-items: start;
  }

  &.vertical-items-center {
    align-items: center;
  }

  &.vertical-items-bottom {
    align-items: end;
  }

  @for $i from 1 to 12 {
    &.columns-$i {
      grid-template-columns: repeat($i, 1fr);
    }
  }

  @media <=map(bp, desktop) {
    &.desktop-columns-1 {
      grid-template-columns: repeat(1, 1fr);
    }

    &.desktop-columns-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media <=map(bp, mobile) {
    &.mobile-columns-1 {
      grid-template-columns: repeat(1, 1fr);

      > .grid-cell[class*=span-] {
        grid-column: span 1;
      }
    }

    &.mobile-columns-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

.grid-flex {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-bottom: -30px;
  margin-left: -15px;

  > .grid-cell {
    padding-right: 15px;
    padding-bottom: 30px;
    padding-left: 15px;

    :last-child {
      margin-bottom: 0;
    }

    &.cell-flex {
      display: flex;
    }

    &.horizontal-left {
      justify-self: start;
    }

    &.horizontal-center {
      justify-self: center;
    }

    &.horizontal-right {
      justify-self: end;
    }

    &.vertical-top {
      align-self: start;
    }

    &.vertical-center {
      align-self: center;
    }

    &.vertical-bottom {
      align-self: end;
    }
  }

  &.gap-small {
    margin-right: -10px;
    margin-bottom: -20px;
    margin-left: -10px;

    > .grid-cell {
      padding-right: 10px;
      padding-bottom: 20px;
      padding-left: 10px;
    }
  }

  &.gap-large {
    margin-right: -30px;
    margin-bottom: -60px;
    margin-left: -30px;

    > .grid-cell {
      padding-right: 30px;
      padding-bottom: 60px;
      padding-left: 30px;
    }
  }

  &.gap-huge {
    margin-right: -40px;
    margin-bottom: -80px;
    margin-left: -40px;

    > .grid-cell {
      padding-right: 40px;
      padding-bottom: 80px;
      padding-left: 40px;
    }
  }

  &.no-overflow {
    &, &.gap-small, &.gap-large, &.gap-huge {
      margin-right: 0;
      margin-left: 0;
    }
  }

  &.horizontal-left {
    justify-content: flex-start;
  }

  &.horizontal-center {
    justify-content: center;
  }

  &.horizontal-right {
    justify-content: flex-end;
  }

  &.vertical-top {
    align-content: flex-start;
  }

  &.vertical-center {
    align-content: center;
  }

  &.vertical-bottom {
    align-content: flex-end;
  }

  &.vertical-items-top {
    align-items: flex-start;
  }

  &.vertical-items-center {
    align-items: center;
  }

  &.vertical-items-bottom {
    align-items: flex-end;
  }

  @for $i from 1 to 12 {
    &.columns-$i > .grid-cell {
      width: calc(100% / $i);
    }
  }

  @for $i from 1 to 12 {
    > .span-$i {
      width: calc(100% / (12 / $i));
    }
  }

  @media <=map(bp, mobile) {
    &.mobile-columns-1 > .grid-cell {
      width: calc(100% / 1);
    }

    &.mobile-columns-2 > .grid-cell {
      width: calc(100% / 2);
    }
  }
}