An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To