Masonry Posts and Gallery

Although there are several plugins available to arrange your posts or image gallery using the masonry technique, it’s surprisingly easy to achieve the same result starting from scratch. Here’s a very simple implementation:

Download masonry.​pkgd.​min.js from masonry.desandro.com and add it to your theme.

Add the following to your header (or footer) changing the path to the script as necessary:

Use .grid on a containing div and .grid-item on each item. There are lots of ways to do this – here how it looks if you’re using Posts on a Page.

There are lots of options available with the masonry script, but it’s quite easy to use CSS to tweak the layout. For example, here’s the CSS for a simple four column responsive layout:

You can use also media queries to change the number of columns depending on browser width.

Including .gallery and .gallery-item in the script function and adding the appropriate CSS allows the masonry effect to be applied to the native gallery.