.grid-container,
.grid-container-fluid {
  .grid-row {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(map-deep-get($grid, 'base', 'column', 'count'), minmax(map-deep-get($grid, 'base', 'column', 'width', 'min'), map-deep-get($grid, 'base', 'column', 'width', 'max')));
    grid-column-gap: map-deep-get($grid, 'base', 'column', 'gap');

    @each $breakpoint in map-deep-get($grid, 'media', 'breakpoint') {
      @media screen and (max-width: map-deep-get($grid, 'media', $breakpoint, 'max-width')) {
        grid-template-columns: repeat(map-deep-get($grid, 'media', $breakpoint, 'column', 'count'), minmax(map-deep-get($grid, 'media', $breakpoint, 'column', 'width', 'min'), map-deep-get($grid, 'media', $breakpoint, 'column', 'width', 'max')));
        grid-column-gap: map-deep-get($grid, 'media', $breakpoint, 'column', 'gap');
      }
    }

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