grid.css

.col, .col-2, .col-1of2, .col-3, .col-1of3, .col-2of3, .col-4, .col-1of4, .col-2of4, .col-3of4, .col-5, .col-1of5, .col-2of5, .col-3of5, .col-4of5, .col-6, .col-1of6, .col-2of6, .col-3of6, .col-4of6, .col-5of6, .col-7, .col-1of7, .col-2of7, .col-3of7, .col-4of7, .col-5of7, .col-6of7, .col-8, .col-1of8, .col-2of8, .col-3of8, .col-4of8, .col-5of8, .col-6of8, .col-7of8 {
  display: block;
  position: relative;
  margin-bottom: 0px;
  float: left; }

.col-2, .col-1of2 {
  margin-right: 4%; }

.col-1of2 {
  width: 48%; }

.col-3, .col-1of3, .col-2of3 {
  margin-right: 4%; }

.col-1of3 {
  width: 30.66667%; }

.col-2of3 {
  width: 65.33333%; }

.col-4, .col-1of4, .col-2of4, .col-3of4 {
  margin-right: 4%; }

.col-1of4 {
  width: 22%; }

.col-2of4 {
  width: 48%; }

.col-3of4 {
  width: 74%; }

.col-5, .col-1of5, .col-2of5, .col-3of5, .col-4of5 {
  margin-right: 4%; }

.col-1of5 {
  width: 16.8%; }

.col-2of5 {
  width: 37.6%; }

.col-3of5 {
  width: 58.4%; }

.col-4of5 {
  width: 79.2%; }

.col-6, .col-1of6, .col-2of6, .col-3of6, .col-4of6, .col-5of6 {
  margin-right: 2%; }

.col-1of6 {
  width: 15%; }

.col-2of6 {
  width: 32%; }

.col-3of6 {
  width: 49%; }

.col-4of6 {
  width: 66%; }

.col-5of6 {
  width: 83%; }

.col-7, .col-1of7, .col-2of7, .col-3of7, .col-4of7, .col-5of7, .col-6of7 {
  margin-right: 1.5%; }

.col-1of7 {
  width: 13%; }

.col-2of7 {
  width: 27.5%; }

.col-3of7 {
  width: 42%; }

.col-4of7 {
  width: 56.5%; }

.col-5of7 {
  width: 71%; }

.col-6of7 {
  width: 85.5%; }

.col-8, .col-1of8, .col-2of8, .col-3of8, .col-4of8, .col-5of8, .col-6of8, .col-7of8 {
  margin-right: 1%; }

.col-1of8 {
  width: 11.625%; }

.col-2of8 {
  width: 24.25%; }

.col-3of8 {
  width: 36.875%; }

.col-4of8 {
  width: 49.5%; }

.col-5of8 {
  width: 62.125%; }

.col-6of8 {
  width: 74.75%; }

.col-7of8 {
  width: 87.375%; }

grid.scss

$grids: (2: 4, 3: 4, 4: 4, 5: 4, 6: 2, 7: 1.5, 8: 1);

.col {
  display: block;
  position: relative;
  margin-bottom: 0px;
  float: left;
}

@each $cols, $gutter in $grids {
  .col-#{$cols} {
    @extend .col;
    margin-right: $gutter * 1%;
  }
  
  @for $i from 1 to $cols {
    $w: (100 - $gutter * ($cols - 1)) / $cols;
    .col-#{$i}of#{$cols} {
      @extend .col-#{$cols};
      width: (($i * $w) + (($i - 1) * $gutter)) * 1%;
    }
  }
}