Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="house"></div>
  <div class="house"></div>
  <div class="house"></div>
  <div class="house"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// create simple grids of width 100%
@mixin simple-grid($divisions, $gutter: 1rem) {
	$division-percentage: 100 / $divisions;
	$gutter-balancer: (($divisions - 1) / $divisions) * $gutter;
	$width: calc(#{($division-percentage)}% - #{($gutter-balancer)});
	width: #{($width)};
	margin-right: #{($gutter)};

	&:nth-of-type(#{($divisions)}n) {
		margin-right: 0rem;
	}
}

.brick {
  @include simple-grid(5);
}

@mixin grid($columns, $total-columns: 12, $gutter: 1/3) {
  $total-width: 100;
  $column-width: 3 * $total-width / (4 * $total-columns - 1);
  $gutter-width: $column-width / 3;
  $grid-width: $column-width * $columns + $gutter-width * ($columns - 1);
  
  width: #{($grid-width)}%;
  margin-right: #{($gutter-width)}%;
  float: left;
}

.container {
  background-color: red;
  height: 100px;
  width: 100%;
}

.house {
  @include grid(3);
  height: 100%;
  background-color: blue;
  
  &:nth-of-type(4n) {
    margin-right: 0rem;
  }
}

SassMeister-output.css

.brick {
  width: calc(20% - 0.8rem);
  margin-right: 1rem;
}

.brick:nth-of-type(5n) {
  margin-right: 0rem;
}

.container {
  background-color: red;
  height: 100px;
  width: 100%;
}

.house {
  width: 23.40426%;
  margin-right: 2.12766%;
  float: left;
  height: 100%;
  background-color: blue;
}

.house:nth-of-type(4n) {
  margin-right: 0rem;
}

SassMeister-rendered.html

<div class="container">
  <div class="house"></div>
  <div class="house"></div>
  <div class="house"></div>
  <div class="house"></div>
</div>