While we’re waiting for the browser adoption for CSS grid layout, I wanted to know what are some good UI hacks for creating masonry layouts in CSS?

Something like this:

masonry layout

Answer

One good way to do this without doing much manupulation in your markup would be to use CSS Multi Column layouts.

You can wrap your masonry items into an <article> tag and give it a column-count and column-gap.

Something like this:

article {
    column-count: 4;
    column-gap: 10px; 
}

By using this, you can just change the column-count and get as many columns as you want without changing the markup

The result would look something like this:

title here

here is a codepen for the demo.

hope it helps! 😊


Extra: here's a great discussion on CSS multi column layouts.

Clap1
(3 answers) Take me to the question