Minimalistic Flex Grid in SCSS

grid.scss

/**
 * Minimalistic Flex Grid in SCSS
 */
$breakpoint-m: 75em;
$breakpoint-s: 40em;

// Rows
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
  @media (max-width: $breakpoint-m) {
    flex-wrap: wrap;
    
    // col-b will have 2 elements per line at this
    // breakpoint, so we can remove the left/right
    // margin from even/uneven to fit them to content
    *[class*="col-b"] {
      &:nth-child(even) {
        margin-right: 0;
      }
      &:nth-child(odd) {
        margin-left: 0;
      }
    }
  }
  @media (max-width: $breakpoint-s) {
    *[class*="col-b"] {
      flex-basis: 100%;
      margin: 0;
    }
  }
}

// Columns
@mixin column($size) {
  flex-grow: $size;
  flex-basis: #{$size + %};
}
// .col-1, .col-2..., 
// each number specifies the relative width
@for $i from 0 through 8 {
  .col-#{$i},
  .col-b-#{$i} {
    @include column(#{$i});
  }
}