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

The consensus from the F2F discussions was to move away from an area-based definition (`gap-decoration-areas`) and toward a property-based solution for controlling gap decoration visibility. This approach involved a combination of container-level and item-level properties.

Based on feedback from developer trials, the primary use cases we've seen can be fully addressed with a **container-level control**. Therefore, we propose having **container-level control** for Level 1 and suggest deferring item-level controls to a future version of the spec, pending further use cases.

### Proposed Solution for Level 1

We propose introducing a set of container-level properties to control the visibility of gap decorations relative to grid items.
[credit to @kbabbitt for [design](https://github.com/kbabbitt/csswg-drafts/blob/gaps-empty-areas/css-gaps-1/visibility-explainer.md)]
```css
/* Longhands */
column-rule-visibility-items: [ all | around | between | none ];
row-rule-visibility-items: [ all | around | between | none ];

/* Shorthand */
rule-visibility-items: <'column-rule-visibility'> || <'row-rule-visibility'>;
```

**Property Value Definitions:**
  * **`all`**: The default behavior. Decorations are painted in all gap segments, regardless of whether adjacent grid cells are occupied.
  * **`around`**: A decoration is painted in a gap segment if **at least one** of the two grid cells adjacent to it contains a grid item.
  * **`between`**: A decoration is painted in a gap segment only if **both** of the grid cells adjacent to it contain a grid item.
  * **`none`**: No decorations are painted.

This approach directly solves the primary feedback from authors who wish to hide separators around empty areas of their layouts.

### Interaction with Other Layout Modes Outside Grid

To the best of my knowledge this concept of "empty cells" is specific to Grid. Other layout modes like Flexbox, multicol, and masonry do not have a formal grid structure with cells that can be definitively identified as "empty". Therefore, these properties would only apply to **grid containers** and would have no effect on other layout contexts.

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


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

Received on Wednesday, 8 October 2025 22:56:28 UTC