<section class="grid-test">
        <div class="row">
            <div class="col-1-of-2">
                Col-1-of-2
            </div>
            <div class="col-1-of-2">
                Col-1-of-2
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-3">
                Col-1-of-3
            </div>
            <div class="col-1-of-3">
                Col-1-of-3
            </div>
            <div class="col-1-of-3">
                Col-1-of-3
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-3">
                Col-1-of-3
            </div>
            <div class="col-2-of-3">
                Col-2-of-3
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-2-of-4">
                Col-2-of-4
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-3-of-4">
                Col-3-of-4
            </div>
        </div>
    </section>
//grid
$grid-width:114rem;
$gutter-vertical:3rem;
$gutter-horizontal:6rem;

//mixin
@mixin clearfix{
  &::after{
    content:'';
    display: table;
    clear:both;
  }
}

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


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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.