grid.scss

@mixin grid($columns, $gutter){
  display: flex;
  flex-wrap: wrap;

  $r: $columns;
  $s: $gutter;
  $f: calc(#{100%/$r} - #{(($r - 1)*$s)/$r});

  &>*{
    width: $f;
    margin-bottom: $s;

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

  //cancelling the margin-bottom of the last row
  & + * {
    margin-top: - $s;
  }
}