Re: [csswg-drafts] [css-gaps] Gap decoration outsets at the edges (#12024)

Commenting on this issue because I agree that authors might find it useful to have finer control over `*-rule-outset` and `*-rule-break` behaviors. Similar to the width, style and color [syntax](https://www.w3.org/TR/css-gaps-1/#color-style-width) which allow authors target specific gaps, I think authors might want different `rule-break` and `rule-outset` behaviors for different gaps. I've put together a couple of examples to shed more light on this.

The first is the classic periodic table design layout ([inspired by work done by Brett Jones](https://dribbble.com/shots/6521353-Periodic-Table-of-Web-Elements-CSS-Grid-May-22)). In this layout, it would be beneficial not only to assign different outset behaviors to each gap, but also target each intersection end individually for those outsets. Below I've sketched how each column gap might have its own outset behavior:

<img width="466" height="334" alt="Image" src="https://github.com/user-attachments/assets/ef180531-291d-4ec6-971f-be94220af243" />

For different breaks, consider the case (Testcase inspired by [Patrick Brosset](https://patrickbrosset.com/)): 

<img width="444" height="362" alt="Image" src="https://github.com/user-attachments/assets/f8be1364-93ea-44ed-ab78-f4b40c3a749a" />

Right now `row-rule-break` is set to `intersection`. What I’d like is the ability to make the first, second, and last row gaps non‑breaking, while the middle gaps break at every intersection. 

```
row-rule-break: none none repeat(auto, intersection) none
row-rule-outset: unset unset repeat(auto, 0) unset
```

 

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


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

Received on Friday, 18 July 2025 01:24:48 UTC