[css-contain-3][css-grid-2] Interaction between subgrid, and containment.
@frivoal is already working on this.
Since Oct 3, 2022.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
Most layout algorithms only allow communicate with their direct children. When size container queries are present this is important as we can:
- Determine the size of the block.
- Determine the style for its children.
- Enter into the layout algorithm knowing that all the children will have their correct style (and importantly we don't need to know what the grandchildren's style is yet).
There are 2-3[*] exceptions to this rule.
-
Tables. Table layout walks 3 levels deep (table -> section -> row -> cell), and before we know the size of the section, and row. Tables however are fine for container queries - as the container query can only apply to the top-level table element - and not the individual internal table parts. (As per - https://drafts.csswg.org/css-contain-1/#containment-size ).
-
Subgrid. Similar to tables subgrid layout can walk N levels deep (depending on how many nested subgrids there are) before we know the size of the individual subgrid elements. I.e. we'll walk N levels deep during placement, and sizing of the grid.
An example where I believe the containment principle could be being violated in the FF implementation of subgrid at the moment:
<!DOCTYPE html>
<div style="display: grid; grid-template: auto / 100px 100px; border: solid;">
<div style="display: grid; grid-template-rows: subgrid; contain: size;">
<div style="background: lime; height: 100px;"></div>
</div>
<div style="background: hotpink;"></div> <!-- This sizes to 100px tall. This is picked up from the grandchild within the size contained element. -->
</div>
There are broadly two solutions here.
- Follow tables, inlines, etc. and disallow containment on subgrids.
- Make grids that have a subgridded axis behave as a "standalone grid", that is they wont participate in the parts grid layout.
[*] 3rd one is inlines but different to top level layout algorithms.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.