[csswg-drafts] [css-contain-3][css-grid-2] Interaction between subgrid, and containment. (#7091)

bfgeek has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain-3][css-grid-2] Interaction between subgrid, and containment. ==
Most layout algorithms only allow communicate with their direct children. When size container queries are present this is important as we can:
1. Determine the size of the block.
2. Determine the style for its children.
3. 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.

1. 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 ).

2. 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:
```html
<!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.
1. Follow tables, inlines, etc. and disallow containment on subgrids.
2. 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.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7091 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 25 February 2022 23:52:06 UTC