<ul class="items">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>
@mixin col($col: 3, $marginRight: 15, $marginTop: 10, $parent: ""){
	width: calc((100% - #{$marginRight * $col +px} * (#{$col} - #{$col - 1})) / #{$col} - 0.1px);
	margin-right: #{$marginRight / 2 +px};
	margin-left: #{$marginRight / 2 +px};
	margin-bottom: #{$marginTop+px};
	@at-root #{$parent} {
		margin-right: -#{$marginRight / 2 +px};
		margin-left: -#{$marginRight / 2 +px};
		margin-bottom: -#{$marginTop+px};
	}
}

.items {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 150px;
    background: blue;
    @include col(3, 20, 40, ".items");
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.