Creating a CSS-only Responsive Masonry

A detailed tutorial to create a pure CSS-only responsive masonry without making use of JavaScript or jQuery.

Pinterest has inspired many to do a masonry-based layout on their sites. We have some solid JavaScript alternatives out there to create masonry layouts, but how about using only CSS to do that?

Masonry grid

Back in 2011, when Pinterest was just launched, I myself tried creating its lookalike with plain CSS. I started off by using  float  and  vertical-align  properties on my  inline-block  elements (it sounds silly now). It didn’t help.

Some friends suggested me to use tables. Not tables, but the table display properties. With  table ,  table-cell , I ended up with a fixed-height columns grid, which is definitely not a masonry.

The secret CSS recipe for masonry layout

Not a secret actually, some people have already written about it. Before going further, I would like to show you with a demo of what we are going to create:


I discovered this technique while experimenting with CSS column properties. About 3 years ago, I contributed the outcome of this experimentation to a WordPress plugin called  WP Pinterest  to show Pinterest pins in a masonry fashion. Now when I’ve started this blog to share my CSS love, I’m sharing the technique with you through this tutorial.

No special hacks required, all we need are the CSS  column  properties to create CSS-only masonry layouts. Lets talk about them.

column-count  is the magic property that we’ll utilize to lay down our masonry. We’ll also use another CSS column property  column-gap  to separate the bricks (masonry items) in our layout. So without waiting anymore, lets jump onto the tut.

column-count  allows you to add a number of adjacent columns to anynon-inline  element. The child elements inside it aligns as per the number of columns in a masonry fashion.  More on column-count.

We can add gaps or margin among child elements with the help of column-gap  property. So below are the basic snippets I prepared to demonstrate the masonry:


Starting up with the markup, I have a container  div  that wraps our masonry and contains all of our masonry bricks (or columns). I’ve given the container element a class  . masonry , and  . item  to all the child elements.

Note that the below markup carries sample data for demonstration purpose. I’ve used more sample data in the demo to effectively demonstrate the masonry.


Now comes the most important part, the CSS. Applying CSS  column-count  property to the container ( . masonry ), the children ( . item s) will be automatically arranged as per the value supplied to the property.

To make child elements properly arranged inside the masonry, its important to set their  display  as  inline - block  with 100% width.

That’s the basic idea.  Demo the masonry here


As CSS columns are supported by modern browsers only, you may also consider adding JavaScript fallbacks to make it work on older browsers. We can add a fallback to our masonry by making use of  jQuery Masonryplugin.

Following is the workaround to call jQuery Masonry as a fallback to our CSS masonry in IE9 or below:

This basic masonry is responsive by default (it won’t create scroll-bars on zooming-in) as none of its elements has any fixed width. Bus still, we can make it look different on different resolutions.

Responsive CSS masonry

Along with the responsiveness, I tried to make it look better than our basic demo. I’m using CSS3 media queries to show different number of columns on different screen resolutions. Sharing the CSS snippet below that I used to revamp our masonry:


Markup would be similar to the basic example we see earlier in the article. I’ve used a container ( . wrapper ) to wrap-in my masonry, added images and video to make it look attractive. You can see the full markup in the demo source.


That’s it. Further, you may play with the styles to give it the desired look. Hope you enjoyed the tutorial, I welcome your thoughts, questions, and suggestions.


Facebook Comments
Rate this post