SASS grid system with CSS grid

_grid.scss

$screen-sizes: (
  xxl: 1920px,
  xl: 1440px,
  l: 1360px,
  ml: 1280px,
  m: 768px,
  s: 576px
);

$col-count: 24;

@for $col from 1 through $col-count {
  .col--span\:#{$col} {
    grid-column-start: span $col;

    @for $i from 0 through ($col-count - 1) {
      &.col--offset\:#{$i} {
        grid-column: ($i + 1) / span $col;
      }
    }

    &.col--center {
      grid-column: (($col-count - $col) / 2 + 1) / span $col;
    }
  }
}

@each $label, $size in $screen-sizes {
  @for $col from 1 through $col-count {
    @media (max-width: $size) {
      .#{$label}-col--span\:#{$col} {
        grid-column-start: span $col;

        @for $i from 0 through ($col-count - 1) {
          &.#{$label}-col--offset\:#{$i} {
            grid-column: ($i + 1) / span $col;
          }
        }

        &.#{$label}-col--center {
          grid-column: (($col-count - $col) / 2 + 1) / span $col;
        }
      }
    }
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat($col-count, 1fr);
  grid-column-gap: 30px;
}