* {
  box-sizing: border-box;
}

  .grid-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    .row:before, .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .row {
      $base-column-width: 8.333333%;
      height: 100%;
      [class*="col-"] {
        float: left;
        min-height: 1px;
        border: 1px solid red;
        padding: 12px;
      }
      @for $i from 1 through 12 {
        .col-#{$i} {
          width: ($base-column-width * $i);
        } //col
      } // for
    } // row
  } // container