SCSS grid @mixin

_grid.scss

@mixin grid($cols: 4, $gap: 2rem, $item: '> *') {
  &:after {
    clear: left;
    content: '';
    display: block;
  }

  #{$item} {
    box-sizing: border-box;
    float: left;
    width: calc(calc(100% / #{$cols}) - calc(calc(#{$gap} * #{$cols - 1}) / #{$cols}));

    &:not(:nth-child(#{$cols}n)) {
      margin-right: $gap;
    }

    &:nth-child(n+#{$cols + 1}) {
      margin-top: $gap;
    }
  }
}

.two-col {
  @include media('<tablet') {
    @include grid(1);
  }

  @include media('>=tablet') {
    @include grid(2);
  }
}

.three-col {
  @include media('<tablet') {
    @include grid(1);
  }

  @include media('>=tablet', '<desktop') {
    @include grid(2);
  }

  @include media('>=desktop') {
    @include grid(3);
  }
}

.four-col {
  @include media('<tablet') {
    @include grid(1);
  }

  @include media('>=tablet', '<desktop') {
    @include grid(2);
  }

  @include media('>=desktop') {
    @include grid(4);
  }
}