Responsive, JavaScript-Free Masonry Layouts with CSS3 Columns

css3 masonry layout

I recently needed to create a number of masonry layouts for a WooCommerce website I’m building for a friend. I didn’t want to resort to jQuery, and that’s how, at long last, I found CSS3’s columns property. It lets you do CSS-only layouts that look like this:

1
2
3
4
5
6
7

Or this:

1
2
3
4
5
6
7

What I came to is quite well explained in this thorough tutorial (although I learned more by random Googling and W3 Schools articles). Nicely, the tutorial also goes the extra mile and teaches you how to support older browsers like IE9.


4 Responses

Comments

Add a Comment

Your email address will not be published. Required fields are marked *