Flexbox Grid System

_grid.scss

@mixin Cell ($size) {
    // Specific sizing for cells in 5% increments.
    .Cell {
        @for $i from 1 through 20 {
          &.#{$size}-#{$i*5} {
            flex: 0 0 #{$i*5}%;
          }
        }
    }
}

@mixin Fit ($size) {
    // Proportionally space cells rather than wrapping
    &.Fit-#{$size} {
        >.Cell {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
    }
}

.Grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    // Add Gutters
    &.Gutter {
        margin: 0 -1rem 0 -1rem;
        
        >.Cell {
            padding: 0 1rem 0 1rem;
        }
    }
    
    // Grid Vertical Alignment
    &.Align-Top {
      align-items: flex-start;
    }
    &.Align-Bottom {
      align-items: flex-end;
    }
    &.Align-Center {
      align-items: center;
    }
    
    // Default Cell Behavior
    .Cell {
        
        // Cell Sizing, full-width by default for responsive
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        
        // Per Cell Alignment
        &.Align-Top {
          align-self: flex-start;
        }
        &.Align-Bottom {
          align-self: flex-end;
        }
        &.Align-Center {
          align-self: center;
        }
    }
    
    $display-size: "Mobile";
    @include Fit($display-size);
    @include Cell($display-size);    
}

// Small devices (Landscape phones, 544px)
@media (min-width: 34em) {
    .Grid {
        $display-size: "Small";
        @include Fit($display-size);
        @include Cell($display-size);
    }
}

// Medium devices (Tablets, 768px)
@media (min-width: 48em) { 
    .Grid {
        $display-size: "Medium";
        @include Fit($display-size);
        @include Cell($display-size);
    }
}

// Large devices (Desktops, 992px)
@media (min-width: 62em) { 
    .Grid {
        $display-size: "Large";
        @include Cell($display-size);
        @include Fit($display-size);
    }
}

// Extra large devices (Large desktops, 1200px)
@media (min-width: 75em) { 
    .Grid {
        $display-size: "Extra";
        @include Cell($display-size);
        @include Fit($display-size);
    }
}

grid.css

.Grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .Grid.Gutter {
    margin: 0 -1rem 0 -1rem; }
    .Grid.Gutter > .Cell {
      padding: 0 1rem 0 1rem; }
  .Grid.Align-Top {
    align-items: flex-start; }
  .Grid.Align-Bottom {
    align-items: flex-end; }
  .Grid.Align-Center {
    align-items: center; }
  .Grid .Cell {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; }
    .Grid .Cell.Align-Top {
      align-self: flex-start; }
    .Grid .Cell.Align-Bottom {
      align-self: flex-end; }
    .Grid .Cell.Align-Center {
      align-self: center; }
  .Grid.Fit-Mobile > .Cell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .Grid .Cell.Mobile-5 {
    flex: 0 0 5%; }
  .Grid .Cell.Mobile-10 {
    flex: 0 0 10%; }
  .Grid .Cell.Mobile-15 {
    flex: 0 0 15%; }
  .Grid .Cell.Mobile-20 {
    flex: 0 0 20%; }
  .Grid .Cell.Mobile-25 {
    flex: 0 0 25%; }
  .Grid .Cell.Mobile-30 {
    flex: 0 0 30%; }
  .Grid .Cell.Mobile-35 {
    flex: 0 0 35%; }
  .Grid .Cell.Mobile-40 {
    flex: 0 0 40%; }
  .Grid .Cell.Mobile-45 {
    flex: 0 0 45%; }
  .Grid .Cell.Mobile-50 {
    flex: 0 0 50%; }
  .Grid .Cell.Mobile-55 {
    flex: 0 0 55%; }
  .Grid .Cell.Mobile-60 {
    flex: 0 0 60%; }
  .Grid .Cell.Mobile-65 {
    flex: 0 0 65%; }
  .Grid .Cell.Mobile-70 {
    flex: 0 0 70%; }
  .Grid .Cell.Mobile-75 {
    flex: 0 0 75%; }
  .Grid .Cell.Mobile-80 {
    flex: 0 0 80%; }
  .Grid .Cell.Mobile-85 {
    flex: 0 0 85%; }
  .Grid .Cell.Mobile-90 {
    flex: 0 0 90%; }
  .Grid .Cell.Mobile-95 {
    flex: 0 0 95%; }
  .Grid .Cell.Mobile-100 {
    flex: 0 0 100%; }

@media (min-width: 34em) {
  .Grid.Fit-Small > .Cell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .Grid .Cell.Small-5 {
    flex: 0 0 5%; }
  .Grid .Cell.Small-10 {
    flex: 0 0 10%; }
  .Grid .Cell.Small-15 {
    flex: 0 0 15%; }
  .Grid .Cell.Small-20 {
    flex: 0 0 20%; }
  .Grid .Cell.Small-25 {
    flex: 0 0 25%; }
  .Grid .Cell.Small-30 {
    flex: 0 0 30%; }
  .Grid .Cell.Small-35 {
    flex: 0 0 35%; }
  .Grid .Cell.Small-40 {
    flex: 0 0 40%; }
  .Grid .Cell.Small-45 {
    flex: 0 0 45%; }
  .Grid .Cell.Small-50 {
    flex: 0 0 50%; }
  .Grid .Cell.Small-55 {
    flex: 0 0 55%; }
  .Grid .Cell.Small-60 {
    flex: 0 0 60%; }
  .Grid .Cell.Small-65 {
    flex: 0 0 65%; }
  .Grid .Cell.Small-70 {
    flex: 0 0 70%; }
  .Grid .Cell.Small-75 {
    flex: 0 0 75%; }
  .Grid .Cell.Small-80 {
    flex: 0 0 80%; }
  .Grid .Cell.Small-85 {
    flex: 0 0 85%; }
  .Grid .Cell.Small-90 {
    flex: 0 0 90%; }
  .Grid .Cell.Small-95 {
    flex: 0 0 95%; }
  .Grid .Cell.Small-100 {
    flex: 0 0 100%; } }

@media (min-width: 48em) {
  .Grid.Fit-Medium > .Cell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .Grid .Cell.Medium-5 {
    flex: 0 0 5%; }
  .Grid .Cell.Medium-10 {
    flex: 0 0 10%; }
  .Grid .Cell.Medium-15 {
    flex: 0 0 15%; }
  .Grid .Cell.Medium-20 {
    flex: 0 0 20%; }
  .Grid .Cell.Medium-25 {
    flex: 0 0 25%; }
  .Grid .Cell.Medium-30 {
    flex: 0 0 30%; }
  .Grid .Cell.Medium-35 {
    flex: 0 0 35%; }
  .Grid .Cell.Medium-40 {
    flex: 0 0 40%; }
  .Grid .Cell.Medium-45 {
    flex: 0 0 45%; }
  .Grid .Cell.Medium-50 {
    flex: 0 0 50%; }
  .Grid .Cell.Medium-55 {
    flex: 0 0 55%; }
  .Grid .Cell.Medium-60 {
    flex: 0 0 60%; }
  .Grid .Cell.Medium-65 {
    flex: 0 0 65%; }
  .Grid .Cell.Medium-70 {
    flex: 0 0 70%; }
  .Grid .Cell.Medium-75 {
    flex: 0 0 75%; }
  .Grid .Cell.Medium-80 {
    flex: 0 0 80%; }
  .Grid .Cell.Medium-85 {
    flex: 0 0 85%; }
  .Grid .Cell.Medium-90 {
    flex: 0 0 90%; }
  .Grid .Cell.Medium-95 {
    flex: 0 0 95%; }
  .Grid .Cell.Medium-100 {
    flex: 0 0 100%; } }

@media (min-width: 62em) {
  .Grid .Cell.Large-5 {
    flex: 0 0 5%; }
  .Grid .Cell.Large-10 {
    flex: 0 0 10%; }
  .Grid .Cell.Large-15 {
    flex: 0 0 15%; }
  .Grid .Cell.Large-20 {
    flex: 0 0 20%; }
  .Grid .Cell.Large-25 {
    flex: 0 0 25%; }
  .Grid .Cell.Large-30 {
    flex: 0 0 30%; }
  .Grid .Cell.Large-35 {
    flex: 0 0 35%; }
  .Grid .Cell.Large-40 {
    flex: 0 0 40%; }
  .Grid .Cell.Large-45 {
    flex: 0 0 45%; }
  .Grid .Cell.Large-50 {
    flex: 0 0 50%; }
  .Grid .Cell.Large-55 {
    flex: 0 0 55%; }
  .Grid .Cell.Large-60 {
    flex: 0 0 60%; }
  .Grid .Cell.Large-65 {
    flex: 0 0 65%; }
  .Grid .Cell.Large-70 {
    flex: 0 0 70%; }
  .Grid .Cell.Large-75 {
    flex: 0 0 75%; }
  .Grid .Cell.Large-80 {
    flex: 0 0 80%; }
  .Grid .Cell.Large-85 {
    flex: 0 0 85%; }
  .Grid .Cell.Large-90 {
    flex: 0 0 90%; }
  .Grid .Cell.Large-95 {
    flex: 0 0 95%; }
  .Grid .Cell.Large-100 {
    flex: 0 0 100%; }
  .Grid.Fit-Large > .Cell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; } }

@media (min-width: 75em) {
  .Grid .Cell.Extra-5 {
    flex: 0 0 5%; }
  .Grid .Cell.Extra-10 {
    flex: 0 0 10%; }
  .Grid .Cell.Extra-15 {
    flex: 0 0 15%; }
  .Grid .Cell.Extra-20 {
    flex: 0 0 20%; }
  .Grid .Cell.Extra-25 {
    flex: 0 0 25%; }
  .Grid .Cell.Extra-30 {
    flex: 0 0 30%; }
  .Grid .Cell.Extra-35 {
    flex: 0 0 35%; }
  .Grid .Cell.Extra-40 {
    flex: 0 0 40%; }
  .Grid .Cell.Extra-45 {
    flex: 0 0 45%; }
  .Grid .Cell.Extra-50 {
    flex: 0 0 50%; }
  .Grid .Cell.Extra-55 {
    flex: 0 0 55%; }
  .Grid .Cell.Extra-60 {
    flex: 0 0 60%; }
  .Grid .Cell.Extra-65 {
    flex: 0 0 65%; }
  .Grid .Cell.Extra-70 {
    flex: 0 0 70%; }
  .Grid .Cell.Extra-75 {
    flex: 0 0 75%; }
  .Grid .Cell.Extra-80 {
    flex: 0 0 80%; }
  .Grid .Cell.Extra-85 {
    flex: 0 0 85%; }
  .Grid .Cell.Extra-90 {
    flex: 0 0 90%; }
  .Grid .Cell.Extra-95 {
    flex: 0 0 95%; }
  .Grid .Cell.Extra-100 {
    flex: 0 0 100%; }
  .Grid.Fit-Extra > .Cell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; } }