… 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.
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.