layout_16_gridAdvanced-mixin-fallback.scss

@mixin gridAdvanced($cols...) {
  $i: 1;
  $span: 0;
  @each $col in $cols {
    > :nth-of-type(#{$i}) {
      @if nth($col,2) == -1 {
        $span: $grid-columns - nth($col,2) - nth($col,1);
      } @else {
        $span: nth($col,2) - nth($col,1);
      }
      width: calc( #{$span}*((100% - #{$gap-horizontal}*#{$grid-columns})/#{$grid-columns}) + (#{nth($col,1)} - 1)*#{$gap-horizontal} - 1px);
      min-width: 0px;
    }
    $i: $i + 1;
  }

  @supports(grid-area: auto) {
    grid-template-columns: repeat($grid-columns, 1fr);

    $i: 1;
    @each $col in $cols {
      > :nth-of-type(#{$i}) {
        grid-column-start: nth($col,1);
        grid-column-end: nth($col,2);
        grid-row-start: nth($col,3);
        grid-row-end: nth($col,4);
      }
      $i: $i + 1;
    }
    
    > :nth-child(n) {
      width: auto;
      margin: 0;
    }
  }
}