[css-grid] grid-gap is still taking up space when an element defined in grid-template-area is not on the page.

[bramdoppen]

Hi all! Love the work you do, but there is one thing that I would like to mention here: grid-gaps that are still taking up space when element is not in the DOM.

It works when all elements are present
Everything is fine here. Nice gaps between elements.

The issue:
When the last element (the filter) is removed from the page (but is still defined in the grid-template-area) the row-gap is still taking up space.

Would be great if css grid would not add those row-gaps in the future.
Did some research but there is no rock-solid workaround that I can use right now, or am I missing something?

[SebastianZ]

What you can do right now is define your grid differently when one of the elements is not in the DOM or not displayed.

In your example this means to only specify the "picture" and "content" areas and only two grid-template-rows.

Another solution for this would be allowing to define different gap sizes as discussed in #1659.

Besides those two approaches, I think a general solution for this would be to have a way to control whether to collapse gaps adjacent to empty grid tracks - something like a gap-collapse property with the values none and adjacent.

Sebastian

[fantasai]

I suspect we can't do it by default at this point anymore, but collapsing gaps seems like a good way to go here. We kinda do it already for auto-fit repeats. Might make more sense to take the same values as border-collapse though. :)

@MatsPalmgren Thoughts?

[bramdoppen]

@SebastianZ Thanks for your reply!

Allowing to define different gap sizes would be awesome, but it would not be a perfect solution for this issue.

Something like a gap-collapse property would solve this issue and it will be a gread addition to grid!

[pavelspichonak]

@bramdoppen maybe you found some new workaround? To have multiple css classes with different grid-template-areas when you have a lot of blocks and any block can be removed from page, it is a pain.