Pinterest style (Masonry) layout using pure CSS

What’s quite expensive to run (in terms of machine resources) and not totally trivial to implement is surprisingly straightforward to achieve in CSS and works seamlessly with responsive layouts.

I discovered this layout option whilst working on picplane.com where I wanted to nicely show a big list of images and Masonry was getting taxing on performance, especially with Angular.

Here’s an example of the result you can achieve:

The blocks fill the gaps effectivley

With this CSS:

.masonry-container {
 column-count: 3;
 column-gap: 15px;
}
.masonry-item {
 display: inline-block;
 width: 100%;
}
.masonry-item img {
 display:block;
 width: 100%;
}

Here’s the JSBin for you to play with yourself

There’s a small but important detail here that there’s some magic in the display:inline-block; for the items to not be split across columns and nicely sit at the top of the container.

This approach has a problem in the ordering of the content going top down, left to right which won’t make total sense with regard to chronological data. That being said, this will get you pretty close to a fluid, Pinterest style layout. It’s probably self evident but Masonry will give you much more flexibility in layout options including this ordering control and allowing elements to span multiple columns.