Flexbox Grid System

_grid.scss

@mixin grid($count) {
  display: flex;
    
    // Add Gutters
    &.Gutter {
        margin: -1em 0 0 -1em;
        
        >.Cell {
            padding: 1em 0 0 1em;
        }
    }
    
    // Grid Alignment
    &.align-top {
      align-items: flex-start;
    }
    &.align-bottom {
      align-items: flex-end;
    }
    &.align-center {
      align-items: center;
    }
    
    // Cell Sizing
    .Cell {
        flex: 1;

        @for $i from 1 through $count - 1 {
          &.col-#{$i} {
            flex: 0 0 #{100 * $i/$count}%;
          }
        }
        
        // Cell Alignment
        &.align-top {
          align-self: flex-start;
        }
        &.align-bottom {
          align-self: flex-end;
        }
        &.align-center {
          align-self: center;
        }

    }
    
}