Legacy sass grid module (working IE8+) based on floats (I have to swap my flexbox grid with floats due to IE8 support thats why I just quickly rewrite it).

_grid-legacy.scss

$breakpoints: (
  xs: 320px,   //small
  sm: 768px,   //tablet
  md: 1024px,  //laptop
  lg: 1400px   //desktop
);

// Basic layout settings
$layout: (
  width: 1170px,
  layouts: 12,
  gutter: 1rem
);

.row {
  @include clearfix;
  display: block;
  width: 100%;
  max-width: map_get($layout, 'width') + (map_get($layout, 'gutter') * 2);
  margin: 0 auto;
}

.col {
  float: left;
  display: block;
  padding-left: map_get($layout, 'gutter');
  padding-right: map_get($layout, 'gutter');
  box-sizing: border-box;
}

.col--last {
  float: right;
}

.col--no-gutter {
  padding-left: 0;
  padding-right: 0;
}

@each $key, $value in $breakpoints {
  $ord: index(map-keys($breakpoints), $key);

  // Wrap classes in MQ, except for first one
  @if $ord != 1 {

    @include media('>#{$key}') {
      // create auto class which will stretch automaticaly based on number of columns
      .col--#{$key} {
        width: 100%;
      }

      // Generate col classes for specific layout and breakpoint
      @each $grid in map_get($layout, 'layouts') {
        @for $i from 1 through $grid {
          .col--#{$key}-#{$i}-#{$grid} {
            width: percentage($i / $grid);
          }
        }

        // Offset classes
        .col--#{$key}-offset-none {
          margin-left: 0;
        }

        @for $i from 1 to $grid {
          .col--#{$key}-offset-#{$i}-#{$grid} {
            margin-left: percentage($i / $grid);
          }
        }
      }
    }

  } @else {
    // classes for first (mobile) breakpoint - no MQ in order
    // for it to work from 0px width

    .col--#{$key} {
      width: 100%;
    }

    @each $grid in map_get($layout, 'layouts') {
      @for $i from 1 through $grid {
        .col--#{$key}-#{$i}-#{$grid} {
          width: percentage($i / $grid);
        }
      }

      .col--#{$key}-offset-none {
        margin-left: 0;
      }

      @for $i from 1 to $grid {
        .col--#{$key}-offset-#{$i}-#{$grid} {
          margin-left: percentage($i / $grid);
        }
      }
    }
  }
}