problem with a masonry layout . help needed pls
https://play.tailwindcss.com/YtqxLRO4qL
why this is acting wierd pls help
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
12 Replies
you've got the 'break-inside-avoid' on the image, you need to put it on the parent div
and it solves the problem ?
If the issue was that the text and image didn't stay together, yes
yea thats the issue
thanks
no problem
is this design good enough for a food blog
?
yea, it's okay.
Btw, this isn't really masonry, but css multicolumn layout. For now that's the only css-option that comes close.
I think they currently are working on an option in CSS Grid to create masonry layouts
oh
what is the difference . they look similary right
the masory and this one
the order is different, in masonry the content goes from left to right and fills available space in height.
the multi columns fill the columns first and don't adjust to the available height
oh
here an interesting article https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
Chris Coyier
CSS-Tricks
Approaches for a CSS Masonry Layout | CSS-Tricks
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least
this is beautiful