grid.scss

.row{
    max-width: $grid-width;
    background-color: red;
    margin: 0 auto;
    &:not(:last-child){
    margin-bottom: $gutter-vertical;
    }
    @include clearfix;

    [class^="col-"]{
        background-color: wheat;
        &:not(:last-child){
            margin-right: $horizontal-gutter;
        }
        float: left;
    }

.col-1-of-2{
    width: calc((100% - #{$horizontal-gutter}) / 2);
 
}

.col-1-of-3{
    width: calc((100% - 2 * (#{$horizontal-gutter})) / 3);
}

.col-1-of-4{
    width: calc((100% - 3 * (#{$horizontal-gutter})) / 4);
}

.col-2-of-3{
    width: calc(2 * ((100% - 2 * (#{$horizontal-gutter})) / 3) + #{$horizontal-gutter});
}

.col-2-of-4{
    width: calc(2 * ((100% - 3 * (#{$horizontal-gutter})) / 4) + #{$horizontal-gutter});
}

.col-3-of-4{
    width: calc(3 * ((100% - 3 * (#{$horizontal-gutter})) / 4) + 2 * #{$horizontal-gutter});
}

}