Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)
Hello everyone,
I am working on a math game in React where I'll have puzzle pieces that can be dragged onto a board with a grid. There is an intial container where the puzzle pieces start and I'm trying to make that layout also be a grid so the pieces can start already aligned to the grid even before they're picked up. For context, here's the game frectangles.netlify.app. Right now the left side of the screen where the pieces start is laid out with flexbox. I'm trying to change it to a grid where
- There is a gap of 1 unit between each piece wherever possible
- The pieces are densely packed together (I don't care about the order of them)
- They can be laid out dynamically given the gridRow and gridCol since the pieces can change sizes.
I made two CodeSandbox's to try this out using spans and grid-auto-flow: "dense";
This one https://codesandbox.io/p/sandbox/flexible-masonry-layout-2j8fsy is working pretty much how I need it to but it's simpler than my project. Where possible, there is only 1 unit of space between each rectangle which is what I want.
This onehttps://codesandbox.io/p/sandbox/flexible-masonry-layout-more-similar-to-frectanngles-tfpqth is more similar to my project and is having weird behaviors like putting way too much space between each rectangle (see picture) and not maintaining consistent spacing between each one. For the purposes of the example, I set the sizeOfEachUnit to 40px. So I set the gap to 40px for the container, but for some reason, that is causing way too much space between rectangles. 5-10px gap looks a little better but it's inconsistent. Since the rectangles are also grids, I was thinking maybe I need subgrid, but I wasn't able to make it work with subgrid either.
4 Replies
For the 2nd one, I'm getting a "Sandbox not found", it might be set to private?
Looking at what you have now, I wouldn't use any gaps?
I've done a quick version here using subgrid: https://codepen.io/kevinpowell/pen/jEOPqqm
Ahh sorry it should be public now.
https://codesandbox.io/p/sandbox/flexible-masonry-layout-more-similar-to-frectanngles-tfpqth
I'm trying to not set any grid rows or columns other than with span since I'll be generating the pieces dynamically. I was using gaps to say that I want one unit in between each piece.
With your example, if I remove the 6 and 4 from the grid-row and grid-column it doesn't have a gap in between example1 and example2
I was using gaps to say that I want one unit in between each piece.Yeah, can't think of a simple solution for that. With the gaps on, however, you can't use subgrid. Looking at the second example though, it looks like everything is lining up now
Oh okay well that makes me feel better that there's not a simple solution. Thank you for trying!
Yeah the mis-alignment with the grid was due to not putting
box-sizing: border-box that I realized after I posted it.