CSS-only Responsive Masonry Layouts

… or Pinterest styled layout. The easiest way to pull this off is with jQuery Masonry plugin. However, I recently figured out that it can also be achieved purely in CSS — with CSS columns.

Introducing Soochi

Here’s how it goes:

.parent { column-count: 3; column-gap: 1rem; column-fill: balance; /* auto will break in Firefox */ } .child { /* Avoids children getting stuck between column */ break-inside: avoid; /* For the bug that causes gap on top of columns sometimes */ display: inline-block; }

And incase you wished to change the number of columns based on the width, you can do that as well:

.parent { column-gap: 1rem; column-fill: balance; column-count: 1; @media screen and (min-width: 640px) { column-count: 2; } @media screen and (min-width: 1024px) { column-count: 3; } }

You can see this approach in action at Indrashish Ghosh’s awesome collection of podcasts.

Limitations

CSS columns is not supported in IE 9 and below, therefore you need to go with the jQuery plugin approach. Also, as of now, it’s highly recommended that you use these properties with vendor prefixes.