- From: Ethan Jimenez via GitHub <sysbot+gh@w3.org>
- Date: Wed, 14 Jun 2023 09:00:51 +0000
- To: public-css-archive@w3.org
ethanjv has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-grid-2] Honoring the specified width/height of a subgrid ==
We want to confirm the expectations of a few scenarios derived from [this section of the spec](https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment):
> The subgrid is always stretched in its subgridded dimension(s): the 'align-self'/'justify-self' properties on it are ignored, as are any specified width/height constraints.
### Scenario 1
```html
<!DOCTYPE HTML>
<div style="display: grid; border: 2px solid;">
<div style="
width: 50px;
display: grid;
grid-row: 1 / -1;
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
background: lightgrey;">
this is a fairly long line
</div>
</div>
```
In [the example above](http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20HTML%3E%0A%3Cdiv%20style%3D%22display%3A%20grid%3B%20border%3A%202px%20solid%3B%22%3E%0A%20%20%3Cdiv%20style%3D%22%0A%20%20%20%20width%3A%2050px%3B%0A%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20grid-row%3A%201%20%2F%20-1%3B%0A%20%20%20%20grid-column%3A%201%20%2F%20-1%3B%0A%20%20%20%20grid-template-columns%3A%20subgrid%3B%0A%20%20%20%20grid-template-rows%3A%20subgrid%3B%0A%20%20%20%20background%3A%20lightgrey%3B%22%3E%0A%20%20%20%20this%20is%20a%20fairly%20long%20line%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E), the specified `width` property should be ignored when sizing the subgrid since its columns are subgridded to the parent grid. However, do we still want to honor the `width: 50px` when performing layout of the subgrid? Blink is stretching to the size of the grid. Gecko has a different behavior where the size of the subgrid is `50px`, but the text is laid out as if it was stretched to the size of the container. Webkit completely ignores the spec and sizes the subgrid to `50px`.
Can we assume that Blink's behavior is expected here since the specified `width` should be ignored?
### Scenario 2
```html
<!DOCTYPE HTML>
<div style="display: grid; border: 2px solid;">
<div style="
width: 50px;
justify-self: center;
display: grid;
grid-row: 1 / -1;
grid-column: 1 / -1;
grid-template-rows: subgrid;
background: lightgrey;">
this is a fairly long line
</div>
</div>
```
In [this second example](http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20HTML%3E%0A%3Cdiv%20style%3D%22display%3A%20grid%3B%20border%3A%202px%20solid%3B%22%3E%0A%20%20%3Cdiv%20style%3D%22%0A%20%20%20%20justify-self%3A%20center%3B%0A%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20grid-row%3A%201%20%2F%20-1%3B%0A%20%20%20%20grid-column%3A%201%20%2F%20-1%3B%0A%20%20%20%20grid-template-rows%3A%20subgrid%3B%0A%20%20%20%20background%3A%20lightgrey%3B%22%3E%0A%20%20%20%20this%20is%20a%20fairly%20long%20line%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E), since the subgrid's inline axis is not subgridded, is it expected that we should respect the `justify-self: center` and consider its `min-content` and `max-content` sizes? Gecko and Webkit seem to be doing that, while we currently are not in Blink.
### Scenario 3
```html
<!DOCTYPE HTML>
<div style="display: inline-grid; border: 2px solid;">
<div style="
width: 50px;
display: grid;
grid-row: 1 / -1;
grid-column: 1 / -1;
grid-template-rows: subgrid;
background: lightgrey;">
<div style="
width: 100px;
height: 25px;
background: pink;">
</div>
</div>
</div>
```
Finally, from [the example above](http://software.hixie.ch/utilities/js/live-dom-viewer/?%0A%3C!DOCTYPE%20HTML%3E%0A%3Cdiv%20style%3D%22display%3A%20inline-grid%3B%20border%3A%202px%20solid%3B%22%3E%0A%20%20%3Cdiv%20style%3D%22%0A%20%20%20%20width%3A%2050px%3B%0A%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20grid-row%3A%201%20%2F%20-1%3B%0A%20%20%20%20grid-column%3A%201%20%2F%20-1%3B%0A%20%20%20%20grid-template-rows%3A%20subgrid%3B%0A%20%20%20%20background%3A%20lightgrey%3B%22%3E%0A%20%20%20%20%3Cdiv%20style%3D%22%0A%20%20%20%20%20%20width%3A%20100px%3B%0A%20%20%20%20%20%20height%3A%2025px%3B%0A%20%20%20%20%20%20background%3A%20pink%3B%22%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E), is our understanding correct that we should ignore the `min-content` size of a subgrid and favor its specified width? I.e., the subgrid's standalone columns will overflow its available space. Gecko and Webkit use the `width: 50px` as the contribution size for the subgrid, while current Blink implementation considers the `min-content` size instead.
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8966 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 14 June 2023 09:00:53 UTC