Как написать «микро-сетку» для трёх столбцов?

$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