Unwanted whitespace with subgrids
Hello everyone. I don't find anything useful to help me understand why the first row on this codepen has that vertical whitespace (on the image it's the red area) when I put
gap: 30px on the grid container.
I can fix this whitespace by putting gap: 0 on the container but then I lose the vertical gap between the cards so it's not useful.
What I want is for the card to take a little height as possible and sharing the available space.
https://codepen.io/Uurshin/pen/pvgJLOP
13 Replies
there's a gap between those two based on the definition of the parent grid that you are following via using
grid-template-rows: subgrid
I believe you can overwrite gaps on subgrids, one sec
oh you are overwriting it
somehow, when I comment
align-items: end out, it works
the gap gets overwrittenThanks. I put align-items: end for you to see it better, but when you remove it the white space juste appears at the end so the problem is still here but in another place.
oh you are right yeah
it's like there's an extra row somehow?
oh wait
that creates the extra row
it should be
auto / span 3
nm, it makes sense that it's span 4, there are 4 rows.yes, it makes sense for the first row + the three inside the sibling div
I have no rational explanation at the moment but my experience with subgrid is limited
yeah, gap is just there no matter what, basically
@Nishruu since you don't seem to be using any kind of row definition at the grid level, why are you trying to use subgrid on nested divs?
I think that you were on the right track here. There are in fact only 2 rows within the Subgrid so that span 4 is adding 1, or even 2, extra rows. (I am not at my computer right now so I can’t use the inspector)
span 2 works without the align-end or span 3 if you want to keep it (I am not sure why)well, there's no kind of row definition at the main grid level (therefore using implicit rows), so I'm confused as to what's going on at the subgrid level on this use case.
subgrid sometimes gives me headache lol
I suspect that this is either a concept test or a slimmed down version of a real issue that the OP is having.
Yes, it’s a simplified version of my real use case, to avoid conflicts with anything else and use your time as little as possible 🙂 . I'll look at what you said above when I get back on my computer. I'll keep you posted. Thanks !
Ok, it’s indeed logical to put 2 instead of 4. I don’t know when I switch to 4 during my test, perhaps for other reasons. Thanks a lot ! I will reopen if the real use case causes another challenge.
ok so there were extra rows after all!