[csswg-drafts] [css-gaps-1] Gap decorations next to empty grid areas (#12602)

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

== [css-gaps-1] Gap decorations next to empty grid areas ==
We got some author feedback around unwanted gap decorations appearing next to empty grid areas. Examples:

https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1099
<img width="2156" height="1194" alt="Image" src="https://github.com/user-attachments/assets/9f78ec9d-3940-45a2-b138-913bc15e022d" />

https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1100
<img width="1624" height="560" alt="Image" src="https://github.com/user-attachments/assets/20e8f5d8-18c5-4f5b-9c5a-3e3593937d8e" />

https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1111
<img width="3176" height="1996" alt="Image" src="https://github.com/user-attachments/assets/dd3b209a-8b0e-4161-b590-4ca22f66d471" />

For the first two cases, I suggested two options: [Gap Decoration Areas](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md#placement-of-gap-decorations) to set different decorations for different sub-areas of the grid using grid lines, or a new property to define how gap decorations interact with empty grid areas, similar to how we have `empty-cells` for tables. In both of those two cases, the authors expressed a preference for Gap Decoration Areas.

The third case is more interesting. It's a responsive grid that re-flows the contained articles based on how wide the container is. I don't see how Gap Decoration Areas might solve the unwanted decorations in such a case, at least not without script to support. So I think this is a good use case for a property to control decorations in empty grid areas.

Perhaps that property is `empty-cells`, though I think in this case there would need to be three states: (1) decorations in all gaps; (2) decorations in gaps with an item on at least one side; (3) decorations in gaps with items on both sides. In offline discussion with @alisonmaher @oSamDavis @jav099 last week, it also came up that there may be cases where the author wants different behaviors in each direction.

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


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

Received on Wednesday, 13 August 2025 17:26:11 UTC