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.
Here’s how it goes:
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.](http://ghosh.github.io/awesome-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.
⦿
Written on November 14, 2016 in
← All writings