Generated by SassMeister.com.

SassMeister-input-HTML.html

<section class="grid-container">
  <div class="grid-container__item"><h2>One</h2></div>
  <div class="grid-container__item"><h2>Two</h2>
    Pellentesque accumsan fringilla tincidunt. Integer.
  </div>
  <div class="grid-container__item"><h2>Three</h2></div>
  <div class="grid-container__item"><h2>Four</h2></div>
  <div class="grid-container__item"><h2>Five</h2>
    <img src="http://placekitten.com/g/200/200" />
  </div>
  <div class="grid-container__item"><h2>Six</h2></div>
  <div class="grid-container__item"><h2>Seven</h2></div>
  <div class="grid-container__item"><h2>Eight</h2></div>
</section>

SassMeister-input.scss

// ----
// libsass (v3.0.2)
// ----

@mixin gridify($cols, $margin-right: 5%, $ie8-height: auto) {
// Math for widths, margins, and clears
$width: (100% / $cols) - $margin-right + ($margin-right / $cols);
$ie-width: (100% / $cols) - $margin-right;
$clearnum: $cols + 1;
 
// Default styles for each grid item
clear: none;
display: block;
float: left;
margin-right: $margin-right;
width: $width;
 
// Resetting from any previous uses of this mixin
&:nth-child(odd),
&:nth-child(even) {
clear: none;
margin-right: $margin-right;
}
 
// Clear the rows
&:nth-child(#{$cols}n+#{$clearnum}) {
clear: left;
}
// Remove margin-right from last column
&:nth-child(#{$cols}n+#{$cols}) {
margin-right: 0;
}
 
// Fix for IE8 since it can't handle :nth-child()
.lt-ie9 & {
height: $ie8-height;
width: $ie-width;
}
} 

* {
  box-sizing: border-box;
}

.grid-container__item {
  margin-bottom: 15px;
  padding: .5%;
  border: 1px solid #cfcfcf;
  @include gridify(4, 5%);
}

SassMeister-output.css

* {
  box-sizing: border-box; }

.grid-container__item {
  margin-bottom: 15px;
  padding: 0.5%;
  border: 1px solid #cfcfcf;
  clear: none;
  display: block;
  float: left;
  margin-right: 5%;
  width: 21.25%; }
  .grid-container__item:nth-child(odd), .grid-container__item:nth-child(even) {
    clear: none;
    margin-right: 5%; }
  .grid-container__item:nth-child(4n+5) {
    clear: left; }
  .grid-container__item:nth-child(4n+4) {
    margin-right: 0; }
  .lt-ie9 .grid-container__item {
    height: auto;
    width: 20%; }

SassMeister-rendered.html

<section class="grid-container">
  <div class="grid-container__item"><h2>One</h2></div>
  <div class="grid-container__item"><h2>Two</h2>
    Pellentesque accumsan fringilla tincidunt. Integer.
  </div>
  <div class="grid-container__item"><h2>Three</h2></div>
  <div class="grid-container__item"><h2>Four</h2></div>
  <div class="grid-container__item"><h2>Five</h2>
    <img src="http://placekitten.com/g/200/200" />
  </div>
  <div class="grid-container__item"><h2>Six</h2></div>
  <div class="grid-container__item"><h2>Seven</h2></div>
  <div class="grid-container__item"><h2>Eight</h2></div>
</section>