custom configurable flexbox grid works for IE10+

_grid.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 {
  display: flex;
  flex-wrap: wrap;
  max-width: calc(#{map_get($layout, 'width')} + (#{map_get($layout, 'gutter')} * 2));
  margin: 0 auto;
}

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

.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} {
        flex: 1 0 100%;
        max-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} {
            flex: 0 0 percentage($i / $grid);
            max-width: percentage($i / $grid);
          }
        }

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

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

      // Generate horizontal aligment classes
      @each $halign, $prop in (start: 'flex-start', center: 'center', end: 'flex-end', around: 'space-around', between: 'space-between') {
        .#{$key}--#{$halign} {
          justify-content: #{$prop};
        }
      }

      // Generate vertical aligment classes
      @each $valign, $prop in (top: 'flex-start', middle: 'center', bottom: 'flex-end') {
        .#{$key}--#{$valign} {
          align-items: #{$prop};
        }
      }
    }

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

    .col--#{$key} {
      flex: 1 0 100%;
      max-width: 100%;
    }

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

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


    @each $halign, $prop in (start: 'flex-start', center: 'center', end: 'flex-end', around: 'space-around', between: 'space-between') {
      .#{$key}--#{$halign} {
        justify-content: #{$prop};
      }
    }

    @each $valign, $prop in (top: 'flex-start', middle: 'center', bottom: 'flex-end') {
      .#{$key}--#{$valign} {
        align-items: #{$prop};
      }
    }

  }
}