.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

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

@media (max-width: 1280px) {
  @for $i from 1 through 12 {
    .grid-sm-#{$i} {
      grid-column-end: span #{$i};
    }
  }
}

@media (max-width: 1024px) {
  @for $i from 1 through 12 {
    .grid-xs-#{$i} {
      grid-column-end: span #{$i};
    }
  }
}

@media (max-width: 800px) {
  @for $i from 1 through 12 {
    .grid-xxs-#{$i} {
      grid-column-end: span #{$i};
    }
  }
}