Creating masonry layouts in CSS?

RE:

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.

Reply to this…

(3 answers) Take me to the question
Grey Davis's photo

Grey Davis

@greedee

Frontend and other stuff

Appreciations

473

Location

Brazil

Joined on

Feb 1, 2016

Welcome to Hashnode
the dev community

The programming forum to discuss topics broader than bugs and issues, write and share knowledge and connect with the best developers.