Как написать «микро-сетку» для трёх столбцов?
из моих запасов SCSS$grid-columns:               12;
$grid-gutter-width:          30px ;

// Break-points
$screenSM:544px;  //S
$screenMD:768px;  //M
$screenLG:992px; //L
$screenXL:1200px;  //XL

$containerSM:480px;  //S
$containerMD:720px;  //M
$containerLG:960px; //L
$containerXL:1140px;  //XL

// for example: @media #{$md}

$sm: "(max-width: #{$screenSM})";
$md: "(max-width: #{$screenMD})";
$lg: "(max-width: #{$screenLG})";
$xl: "(max-width: #{$screenXL})";


@mixin clearfix() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}
@mixin container($max-widths: 100%, $gutter: $grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left: ($gutter / 2);
  padding-right: ($gutter / 2);
  max-width: $max-widths;
  @include clearfix();
}

@mixin row($gutter: $grid-gutter-width) {
  margin-left:  ($gutter / -2);
  margin-right: ($gutter / -2);
  @include clearfix();
}

@mixin col($size, $gutter: $grid-gutter-width, $columns: $grid-columns) {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
  width: percentage($size / $columns);
}

@mixin col-size($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}
Далее пример генерации классов.container {
 @include container($containerXL);
}
.row {
@include row();
}
.block {
@include col(4);
@media #{$md} {
   @include col-size(3);
}
}
и разметка.container
  .row
    .block
    .block
    .block
Вообще есть специальные ресурсы для генерации чисто css сетки (там можно установить количество колонок, отступы и прочее):960.gszurb.com/playground/css-grid-buildergridpak.com
если 12 колонок, то так:.container {
  width: 960px;
  margin: 0 auto;
}
.col-4 {
  width: 33.33%;
}<body>
  <div class="container">
    <div class="col-4">
      content
    </div>
    <div class="col-4">
      content
    </div>
    <div class="col-4">
      content
    </div>
  </div>
</body>