@import '../variables';
@import '../utilities/mixins';

.#{$framework-prefix}grid {
  @include grid;
}

.grid {
  grid-template-columns: repeat(auto-fit, minmax(calc(960px / #{$grid-columns}), calc(1200px / #{$grid-columns})));
  grid-gap: $grid-gutter-height-base $grid-gutter-width-base;
  display: grid;
}

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

@for $i from 1 through $grid-columns {
  .colspan-#{$i} {
    grid-column: $i span;
  }
  .rowspan-#{$i} {
    grid-row: $i span;
  }
}

@each $bp in map-keys($grid-breakpoints) {

  @for $i from 1 through $grid-columns {

    .colspan-#{$bp}-#{$i} {
      @media (min-width: map-get($grid-breakpoints, $bp)) {
        grid-column: $i span;
      }
    }
    .rowspan-#{$bp}-#{$i} {
      @media (min-width: map-get($grid-breakpoints, $bp)) {
        grid-row: $i span;
      }
    }
  }
}

.col-to-the-end {
  grid-column-end: -1;
}

.col-from-the-start {
  grid-column-start: 1;
}

.row-to-the-end {
  grid-row-end: -1;
}
.row-from-the-start {
  grid-row-start: 1;
}