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.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status