Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 28, 2021 12:20 am GMT

How to make masonry with CSS columns property

There are many ways to make a masonry layout with CSS but today we will use columns property to build it.

At first, we will build a simple card to use in our layout.

Column property

Second, let's make our masonry container and give it some CSS rules, I will make it 3 columns on large screens, two columns on medium screens, and one column on small screens.

we will use the column-count property to do that and the gap to set the space between cards.

let's add some magic

In real-life projects, all cards aren't the same height, so you need to remove unnecessary height of cards, And for that, we will use height:auto to do that, see what I mean in the next pen.

one more problem that the card may be broke for a new column, And to solve that will we use break-inside:avoid to prevent cards from broken.

let's test layout

I think that you need to see the masonry layout dynamically with more cards, let's add more cards with javascript to see the layout.

Thanks for reading, I wish this article is more useful for you.

You can look at my tints and shades generator tool


Original Link: https://dev.to/_zoka/how-to-make-masonry-with-css-columns-property-37k4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To