The Masonry JS library is freakin’ awesome.

Just be sure to define your widths and gutters as percentages.

The HTML …

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

The CSS …

.grid-sizer,
.grid-item {
    width: 22%;
}
 
.gutter-sizer {
    width: 4%;
}
 
.grid-item--width2 {
    width: 48%;
}




The JS …

columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true

See the masonry grid in action on the blog we built for Brennan Real Estate.