Grid fill empty cells
I am trying to create a pattern like this:https://media.discordapp.net/attachments/1210495508909391912/1210495509165252658/email1708617448176.png?ex=65eac4cb&is=65d84fcb&hm=1ad3ae9230a783518eada731df9ebe8889e5eb9fcb3de117dcfb07814072f0d3&=&format=webp&quality=lossless
And I have come so far: https://svelte.dev/repl/96d54cb322ef42f68b85cd52e6795dac?version=4.2.12
But you may notice the empty cell between 2 and 5, and 6 and 9. I want the boxes to move up to fill the empty cells. Is this possible?
Grid infinite repeating pattern • REPL • Svelte
Cybernetically enhanced web apps
16 Replies
Already tried
grid-auto-flow: denseunfortunatly not in css (at the moment), what you are looking for is a masonry grid, but that's not available (yet) for css grid.
there is css columns that can create masonry-like layouts, but they are not able to span over multiple columns and the way they fill are from top to bottom, left to right
Please dont tell me I wasted hours :(
im sorry mate
there are js libs that can help with these "masonry" layouts
I just completed a bento page with a similar issue, and what I ended up doing was the outer scaffolding in grid, and the inner stuff in flex, and assigned 100% height to the flex containers to fill all the space
Do you have an example?
im just looking at your example a bit more. are all the red cells 2 rows?
and do they alternate?
The red boxes are supposed to be 1fr higher than the green boxes
What do you mean with 2 rows?
the red ones are 2 rows
so yea, that's what i meant. maybe there is something possible here. need to think about it
More like 1.1 rows
yea that doesnt matter for now. im looking at the lines at the moment
The masonry feature would fix everything instantly :(
yep
what kind of content is going into the boxes?
Oh uhm I was trying to accomplish this challenge, so no content planned 😅
Actually, you can trick this kind of masonry layout with flex iirc, if you don't care about the order of your elements too much
you set the direction to columns and turn on flex wrap iirc
it'll run like this though