Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

bramdoppen opened this issue Dec 21, 2020 · 4 comments
css-grid-3 Masonry Layout


Copy link

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.
2020-12-21 12_55_54-Window

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.

2020-12-21 12_56_07-Window

2020-12-21 12_58_59-DevTools - pggmenco nl perplex self_werk-en-prive-in-balans_

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?

Copy link

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.


@fantasai fantasai added the css-grid-3 Masonry Layout label Dec 30, 2020
Copy link

fantasai commented Dec 30, 2020

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?

Copy link

bramdoppen commented Jan 4, 2021

@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!

Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
css-grid-3 Masonry Layout
None yet

No branches or pull requests

4 participants