Re: [csswg-drafts] [css-grid-1] Application of grid-positioning properties to static position of grid children is inconsistent (#7661)

**Summary**

Current behavior (per spec) is that the static position of a grid child depends on whether its parent is the abspos containing block or not. See [simplified testcase](https://www.software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A.grid%20%7B%20display%3A%20grid%3B%20grid%3A%20100px%20100px%20%2F%20100px%20100px%3B%20border%3A%20solid%3B%20width%3A%20min-content%3B%20float%3A%20left%20%7D%0A.item%20%7B%20border%3A%20solid%20orange%3B%20position%3A%20absolute%3B%20grid-row%3A%202%3B%20grid-column%3A%202%20%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%20class%3Dgrid%20style%3D%22%22%3E%0A%20%20%3Cdiv%20class%3Ditem%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3Dgrid%20style%3D%22position%3A%20relative%22%3E%0A%20%20%3Cdiv%20class%3Ditem%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E) from above. No other layout model changes the static position based on the qualities of the abspos containing block, so we have agreement that this shouldn't be conditional.

The two behaviors it switches between are
- using the content box of the grid as the static position rectangle
- using the grid-positioning properties (`grid-area`/`grid-row`/`grid-column`) to determine the static position rectangle

(Specifically, it uses the second behavior iff the parent is also the abspos containing block. See [testcase](https://www.software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A%20%20.grid%20%7B%20display%3A%20grid%3B%20grid%3A%201fr%201fr%201fr%20%2F%201fr%202fr%201fr%3B%20width%3A%20100px%3B%20height%3A%20100px%3B%20padding%3A%2010px%3B%20border%3A%20solid%3B%20float%3A%20left%3B%20margin%3A%202px%20%7D%0A%20%20.in-flow%20%7B%20grid-area%3A%202%20%2F%202%3B%20border%3A%20solid%20teal%20%7D%0A%20%20.abspos%20%7B%20position%3A%20absolute%3B%20background%3A%20orange%3B%20grid-area%3A%202%2F2%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%20class%3D%22grid%22%3E%3Cdiv%20class%3D%22in-flow%22%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%22abspos%22%3Eabspos%3C%2Fdiv%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22grid%22%20style%3D%22position%3A%20relative%22%3E%3Cdiv%20class%3D%22in-flow%22%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%22abspos%22%3Eabspos%3C%2Fdiv%3E%3C%2Fdiv%3E%0A).)

**Options**

To make the static position consistent regardless of the abspos containing block, we need to choose one behavior to apply always. The two options advocated for in this issue are:

* use the content box always, ignoring the grid-positioning properties (“Option 2”); see [chrishtr‘s summary comment](https://github.com/w3c/csswg-drafts/issues/7661#issuecomment-1581536966)
* honor the grid-positioning properties always, using the content-box edge when they are `auto` (“Option 3′”); see [fantasai’s summary comment](https://github.com/w3c/csswg-drafts/issues/7661#issuecomment-1568842537)

Note the behaviors here are per-axis, and only apply if the `inset` values are both `auto` in that axis (i.e. for calculating the static position). If at least one `inset` is non-auto, then the box is not statically positioned, and the grid-positioning properties are honored with reference to the abspos containing block (and therefore ignored if the abspos containing block is not itself a grid).

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7661#issuecomment-1587880994 using your GitHub account


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

Received on Monday, 12 June 2023 18:43:45 UTC