Grid system showing gaps
I've been trying to figure out how to make a responsive grid, with some elements spanning 2 tiles,
but I've been running into the issue that there are gaps showing up next to the spanning elements.
Is there a good way to fix this? Any tips would be greatly appreciated!
Here's the Codepen:
https://codepen.io/aldouss/pen/yLZZZPa
6 Replies
That is happening because you have
gap: 1rem on the grid.You can try using "dense" to fill in the gaps so if there are elements that will fit, they will fill in the empty cells
Remove grid-gap and you will get the desired result
I dont think they are talking about the grid-gap but filling in empty cells when items are spanning two cells. But we shall find out!
yep,
grid-auto-flow: dense; will do the trickPerfect! grid-auto-flow: dense worked, thank you everyone for the support!