This content originally appeared on DEV Community and was authored by Mahmoud Ibrahiam
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
This content originally appeared on DEV Community and was authored by Mahmoud Ibrahiam
Mahmoud Ibrahiam | Sciencx (2021-04-28T00:20:19+00:00) How to make masonry with CSS columns property. Retrieved from https://www.scien.cx/2021/04/28/how-to-make-masonry-with-css-columns-property/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.