TrestleAdmin/trestle

.grid {
  --grid-gap: var(--content-area-margin, 0);
  --grid-column-count: 1;
  --grid-column-min-width: 0;

  display: grid;
  grid-template-columns: repeat(var(--grid-column-count), minmax(var(--grid-column-min-width), 1fr));
  gap: var(--grid-gap);

  > .grid-col-full {
    grid-column: 1 / -1;
  }
}

@for $cols from 2 through 12 {
  .grid-cols-#{$cols} {
    --grid-column-count: #{$cols};
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    @for $cols from 2 through 12 {
      .grid-cols-#{$breakpoint}-#{$cols} {
        --grid-column-count: #{$cols};
      }
    }
  }
}