.grid-container,
.grid-container-fluid {
  .grid-row {
    .full {
      grid-column: 1/-1;
    }
    .col-none {
      display: none;
    }
    @for $i from 1 through map-deep-get($grid, 'base', 'column', 'count') {
      .col-#{$i} {
        grid-column: span $i;
      }
    }
    @each $breakpoint in map-deep-get($grid, 'media', 'breakpoint') {
      @for $i from 1 through map-deep-get($grid, 'media', $breakpoint, 'column', 'count') {
        .col-#{$breakpoint}-#{$i} {
          @media screen and (max-width: map-deep-get($grid, 'media', $breakpoint, 'max-width')) {
            display: grid;
            grid-column: span $i;
          }
        }
      }

      .col-#{$breakpoint}-none {
        @media screen and (max-width: map-deep-get($grid, 'media', $breakpoint, 'max-width')) {
          display: none;
        }
      }
    }
  }
}