.grid {
  display: grid;
}

@for $i from 1 through 12 {
  .grid-cols-#{$i} {
    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
  }
}

.grid-cols-none {
  grid-template-columns: none;
}

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

.col-auto {
  grid-column: auto;
}

@for $i from 0 through 32 {
  .gap-#{$i} {
    gap: #{$i}px;
  }
}