Creating masonry layouts in CSS?

This answer has received 1 appreciation.

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.

Write a reply...

Alkshendra Maurya


Frontend Engineer | Hashnode Alumnus

Never miss an answer from Alkshendra Maurya,
when you sign up for Hashnode. Learn more

loading ...