// _grid.scss
.grid {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 0;
}

@for $i from 2 through 12 {
  // Create grid-start-* classes for offsets
  .grid-start-#{$i} {
    grid-column-start: #{$i};
  }

  // Create grid-span-* classes for column spans
  .grid-span-#{$i} {
    grid-column-end: span #{$i};
  }

  // Create grid-*col classes for grid columns
  .grid-#{$i}col {
    grid-column: span #{$i} / span #{$i};
    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
  }
}