grid.scss

/* 
* Grid container. Based on Bootstrap 4. 
*
* Partially works. No offset support.
*/

.grid-container {
  display: grid;
  grid-template-columns: repeat($grid-columns, 1fr);
  margin: 0 auto;

  @for $i from 1 through $grid-columns {
    .grid-col-#{$i} {
      grid-column-end: span $i;
    }
  }

  @each $breakpoint, $gutter in $grid-gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      padding-left: $gutter/2;
      padding-right: $gutter/2;
      gap: $gutter;

      @if map-has-key($container-max-widths, $breakpoint) {
        $max-width: map-get($container-max-widths, $breakpoint);

        max-width: $max-width + $gutter;
      }
    }

    @for $i from 1 through $grid-columns {
      .grid-col-#{$breakpoint}-#{$i} {
        @include media-breakpoint-up($breakpoint) {
          grid-column-end: span $i;
        }
      }
    }
  }
}