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:

    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