Custom SASS grid example

Below is an example of my own version of the bootstrap grid layout. I know CSS grid exists and it is awesome, however it doesn't support IE and unfortunately a lot of businesses still use IE, BBBBOOOOO!!!!!!!, so the eternal pain and suffering must continue.

I have made it so it easy to override the gutter widths and also the amount of columns you can have, in this example I am using a five column grid, why? because I can!

I have also made it easy to expand the grid for larger screen sizes by simply adding the desired suffix and screen resolution to the list.

The seventy lines of SASS below produce over three hundred and fifty lines of CSS, and this is only for five columns, for a twelve column layout it is over seven hundred.

SASS (Technically SCSS)

$LargeDesktop: 1400px;
$Desktop: 1200px;
$TabletLandscape: 992px;
$TabletPortrait: 768px;
$MobileLandscape: 576px;
$sizes: ("":"", $MobileLandscape:"-sm", $TabletPortrait:"-md", $TabletLandscape:"-lg", $Desktop: "-xl", $LargeDesktop:"-xxl");
@use "sass:math";
$oneColumn: math.div(100%, $NumberOfColumns);

%column-settings {
  padding-left: $gutter;
  padding-right: $gutter;
  position:relative;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -$gutter;
  margin-right: -$gutter;
}

@mixin grid($ColSize:"") {
  @for $i from 1 through $NumberOfColumns {
    $width: $oneColumn * $i;

    .col#{$ColSize}-#{$i} {
      flex: 0 0 $width;
      width: $width;
    }

    .offset#{$ColSize}-#{$i} {
      margin-left: $width;
    }
  }

  .col#{$ColSize}{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col#{$ColSize}-auto {
    flex: 0 0 auto;
    width: auto;
  }
}

@each $size,
$screen in $sizes {

  @if $screen=="" {
    @include grid;
  }

  @else {
    @media (min-width: $size) {
      @include grid($screen);
    }
  }
}

@each $size,
$screen in $sizes {
  @for $i from 1 through $NumberOfColumns {
    .col#{$screen}-#{$i} {
      @extend %column-settings;
    }
  }
  .col#{$screen}{
    @extend %column-settings;
  }
  .col#{$screen}-auto {
    @extend %column-settings;
  }
}

TO

CSS

.col-xxl-auto, .col-xxl, .col-xxl-5, .col-xxl-4, .col-xxl-3, .col-xxl-2, .col-xxl-1, .col-xl-auto, .col-xl, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg-auto, .col-lg, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md-auto, .col-md, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm-auto, .col-sm, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col-auto, .col, .col-5, .col-4, .col-3, .col-2, .col-1 {
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.col-1 {
  flex: 0 0 20%;
  width: 20%;
}

.offset-1 {
  margin-left: 20%;
}

.col-2 {
  flex: 0 0 40%;
  width: 40%;
}

.offset-2 {
  margin-left: 40%;
}

.col-3 {
  flex: 0 0 60%;
  width: 60%;
}

.offset-3 {
  margin-left: 60%;
}

.col-4 {
  flex: 0 0 80%;
  width: 80%;
}

.offset-4 {
  margin-left: 80%;
}

.col-5 {
  flex: 0 0 100%;
  width: 100%;
}

.offset-5 {
  margin-left: 100%;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 20%;
    width: 20%;
  }

  .offset-sm-1 {
    margin-left: 20%;
  }

  .col-sm-2 {
    flex: 0 0 40%;
    width: 40%;
  }

  .offset-sm-2 {
    margin-left: 40%;
  }

  .col-sm-3 {
    flex: 0 0 60%;
    width: 60%;
  }

  .offset-sm-3 {
    margin-left: 60%;
  }

  .col-sm-4 {
    flex: 0 0 80%;
    width: 80%;
  }

  .offset-sm-4 {
    margin-left: 80%;
  }

  .col-sm-5 {
    flex: 0 0 100%;
    width: 100%;
  }

  .offset-sm-5 {
    margin-left: 100%;
  }

  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 20%;
    width: 20%;
  }

  .offset-md-1 {
    margin-left: 20%;
  }

  .col-md-2 {
    flex: 0 0 40%;
    width: 40%;
  }

  .offset-md-2 {
    margin-left: 40%;
  }

  .col-md-3 {
    flex: 0 0 60%;
    width: 60%;
  }

  .offset-md-3 {
    margin-left: 60%;
  }

  .col-md-4 {
    flex: 0 0 80%;
    width: 80%;
  }

  .offset-md-4 {
    margin-left: 80%;
  }

  .col-md-5 {
    flex: 0 0 100%;
    width: 100%;
  }

  .offset-md-5 {
    margin-left: 100%;
  }

  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 20%;
    width: 20%;
  }

  .offset-lg-1 {
    margin-left: 20%;
  }

  .col-lg-2 {
    flex: 0 0 40%;
    width: 40%;
  }

  .offset-lg-2 {
    margin-left: 40%;
  }

  .col-lg-3 {
    flex: 0 0 60%;
    width: 60%;
  }

  .offset-lg-3 {
    margin-left: 60%;
  }

  .col-lg-4 {
    flex: 0 0 80%;
    width: 80%;
  }

  .offset-lg-4 {
    margin-left: 80%;
  }

  .col-lg-5 {
    flex: 0 0 100%;
    width: 100%;
  }

  .offset-lg-5 {
    margin-left: 100%;
  }

  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media (min-width: 1200px) {
  .col-xl-1 {
    flex: 0 0 20%;
    width: 20%;
  }

  .offset-xl-1 {
    margin-left: 20%;
  }

  .col-xl-2 {
    flex: 0 0 40%;
    width: 40%;
  }

  .offset-xl-2 {
    margin-left: 40%;
  }

  .col-xl-3 {
    flex: 0 0 60%;
    width: 60%;
  }

  .offset-xl-3 {
    margin-left: 60%;
  }

  .col-xl-4 {
    flex: 0 0 80%;
    width: 80%;
  }

  .offset-xl-4 {
    margin-left: 80%;
  }

  .col-xl-5 {
    flex: 0 0 100%;
    width: 100%;
  }

  .offset-xl-5 {
    margin-left: 100%;
  }

  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media (min-width: 1400px) {
  .col-xxl-1 {
    flex: 0 0 20%;
    width: 20%;
  }

  .offset-xxl-1 {
    margin-left: 20%;
  }

  .col-xxl-2 {
    flex: 0 0 40%;
    width: 40%;
  }

  .offset-xxl-2 {
    margin-left: 40%;
  }

  .col-xxl-3 {
    flex: 0 0 60%;
    width: 60%;
  }

  .offset-xxl-3 {
    margin-left: 60%;
  }

  .col-xxl-4 {
    flex: 0 0 80%;
    width: 80%;
  }

  .offset-xxl-4 {
    margin-left: 80%;
  }

  .col-xxl-5 {
    flex: 0 0 100%;
    width: 100%;
  }

  .offset-xxl-5 {
    margin-left: 100%;
  }

  .col-xxl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
}