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-2] Subgrids and CQs are problematic #7822

Closed
tabatkins opened this issue Oct 3, 2022 · 3 comments
Closed

[css-grid-2] Subgrids and CQs are problematic #7822

tabatkins opened this issue Oct 3, 2022 · 3 comments

Comments

@tabatkins
Copy link
Member

There are a few problematic things about subgrid when it comes to Container Queries.

  1. Single-axis size containment isn't meaningful for subgrids.

    It needs some clarification in the spec, but if a subgrid has full size containment, its children also shouldn't affect the size of the parent grid's tracks (this is an implication of "lays out as if empty", taken to its full conclusion). But if you have just inline size containment, it's not clear what that means for the children. Their sizes don't just affect the subgrid's size; they affect the size of the parent grid's tracks, which can spill out to affect things far outside the subtree, in both axises.

    Probably we want to define that either single-axis size containment gets "upgraded" to full size containment for subgrids, or that size containment makes you an independent grid, like layout containment does.

  2. CQs can change whether a subgrid's item participates in the parent grid at all.

    I don't think this is a true circularity, but @bfgeek tells me it's probably problematic for Chrome's impl if the set of grid items being looked at by the grid layout algo changes midway thru. This can't happen normally - for a CQ to depend on grid layout, it would have to be on a grid item, but then it can only affect the grid item's children, so the set of grid items being laid out doesn't change. But for subgrid this isn't true; its children are lifted into the parent grid for layout purposes, and a CQ can change whether or not they do so (it can make a child abspos, or turn a further nested subgrid child into an independent grid, etc).

    Unsure what the right fix for this is.

@tabatkins tabatkins added css-grid-2 Subgrid; Current Work css-contain-2 Current Work labels Oct 3, 2022
@Loirooriol
Copy link
Contributor

If a subgrid is a query container for size queries, then it also gets layout containment, so it establishes an independent formatting context and stops being a subgrid?

@tabatkins tabatkins added css-contain-3 and removed css-contain-2 Current Work labels Oct 5, 2022
@tabatkins
Copy link
Member Author

Oh, I'd missed/forgotten that size CQs require the element to be layout-contained as well as size-contained!

I believe that resolves both of these issues, then. You can still use a style query on a subgrid to affect whether a child is a grid item or not, but that doesn't depend on the mid-layout results so it won't change the set of grid items mid-layout.

@Loirooriol
Copy link
Contributor

May still need something for contain: inline-size, but TBH I'm not even sure how exactly that's supposed to affect a normal grid, even less so a subgrid.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants