When making this site I wanted to implement a responsive masonry layout but found Desandro's plugin to be a little finicky to work with. Luckily there is a simple solution using CSS columns that works well as long as you don't need to support IE9.

There are a few problems with using JavaScript to implement a masonry layout, the most irritating of which is that they either prevent the use variable height images or require you to wait for all images to be loaded before laying out the grid. This results in unsightly updates to the layout after the page has been loaded. In addition to this, JavaScript plugins like Desandro's often put unnecessary restrictions on your design.

Fortunately there is another option. One which only requires (non-standard... yet) CSS but puts far fewer restrictions on your layout. The solution is to use CSS columns properties.

So first things first; we need to put some divs into a column layout, so here's our HTML.

<div id="masonryGrid">
    <div class="item">First grid item</div>
    <div class="item">Grid item with an image<img src="images/thumbs/bcc42e39f2e801464ec57066b3da03ad.png"/></div>
    <div class="item">Third grid item</div>
    <div class="item">Fourth grid item</div>
</div>

Now we've got our markup, we need some CSS to style it into columns. We'll start of with a simple two column layout.

#masonryGrid {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
}

.item {
    display: inline-block;
    width: 100%;
}

And we end up with a layout that looks something like this...

First grid item Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Grid item with an image Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Third grid item Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Fourth grid item
Now we just need to make it responsive with some media queries. The CSS below switches to a single column layout at screen widths below 780 pixels. 
@media only screen and (max-width: 780px) {
  #masonryGrid { 
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
  }
}
And that's it! We now have a working responsive masonry grid using only CSS. This could be combined with Desandro's plugin to add support for IE 9 and lower but for everything else, the above works pretty well.