A CodePen by Eli Dupuis. Foundation block-grid - Foundation's block grids are awesome but they only work if all the elements are the same height. This SCSS snippet will allow the elements to be different heights. It works by simply clearing every nth element—based on how many columns you have. You can comment out the SCSS to see how the default …

index.html

<h1>Using both small and large grids</h1>

<ul class='small-block-grid-2 large-block-grid-4'>
  <li><img src='http://placekitten.com/g/200/220' /></li>
  <li><img src='http://placekitten.com/g/200/200' /></li>
  <li><img src='http://placekitten.com/g/200/280' /></li>
  <li><img src='http://placekitten.com/g/200/250' /></li>
  <li><img src='http://placekitten.com/g/200/240' /></li>
  <li><img src='http://placekitten.com/g/200/270' /></li>
  <li><img src='http://placekitten.com/g/200/230' /></li>
  <li><img src='http://placekitten.com/g/200/290' /></li>
  <li><img src='http://placekitten.com/g/200/300' /></li>
</ul>


<h1>Using only the small grid</h1>

<ul class='small-block-grid-3'>
  <li><img src='http://placekitten.com/g/200/240' /></li>
  <li><img src='http://placekitten.com/g/200/250' /></li>
  <li><img src='http://placekitten.com/g/200/200' /></li>
  <li><img src='http://placekitten.com/g/200/250' /></li>
  <li><img src='http://placekitten.com/g/200/240' /></li>
</ul>


<h1>Using only the large grid</h1>

<ul class='large-block-grid-3'>
  <li><img src='http://placekitten.com/g/200/260' /></li>
  <li><img src='http://placekitten.com/g/200/220' /></li>
  <li><img src='http://placekitten.com/g/200/200' /></li>
  <li><img src='http://placekitten.com/g/200/260' /></li>
  <li><img src='http://placekitten.com/g/200/270' /></li>
</ul>

style.scss

@import "compass";
// fake Foundation variables... you do not need these
$block-grid-elements: 12;
$small: "only screen and (min-width:768px)";


////////////////////////////////
// copy the code below this line

@media only screen {
	@for $i from 1 through $block-grid-elements {
	  .small-block-grid-#{($i)} > li:nth-child(#{($i)}n+1) {
      clear: left;
	  }
	}
}
@media #{$small} {
  [class*="small-block-grid"][class*="large-block-grid"] > li {
    clear: none;
  }  
	@for $i from 1 through $block-grid-elements {
    .large-block-grid-#{($i)} > li:nth-child(#{($i)}n+1) {
      clear: left;
    }
  }
}

// copy the code above this line 
////////////////////////////////


// misc example styles... you do not need these
li {
  outline: 1px dotted red;
}
img {
  display: block;
  margin: auto;
}