A configurable grid system using flexbox

flex-grid.scss

$size--content: 1080px;
$size--column-gutter: 16px;
$size--columns: 8;

@function fluid-width($span) {
  @return calc(#{percentage($span/$size--columns)} - #{$size--column-gutter});
}

.container {
  margin: 0 $size--column-gutter * 2;
  min-width: $size--content;
}

  .row {
    display: flex;
    margin: 0 (($size--column-gutter / 2) * -1);

    &:not(.row--no-wrap) {
      flex-wrap: wrap;
    }
    
    & + & {
      margin-top: $size--column-gutter;
    }
  }

    .column {
      box-sizing: border-box;
      flex-grow: 0;
      flex-shrink: 0;
      min-width: 0;
      margin: 0 $size--column-gutter/2;

      @for $i from 1 through $size--columns {
        &--#{$i} {
          flex-basis: fluid-width($i);
        }

        &--o-#{$i} {
          margin-left: calc(#{percentage($i/$size--columns)} + #{$size--column-gutter/2});
        }
      }
    }