Re: [csswg-drafts] [css-gaps-1] Gap intersections for multicol containers (#12784)

Had an offline discussion at TPAC with @alisonmaher, @tabatkins, @emilio, and @Loirooriol on this topic and related topics. We came to a set of conclusions that change the model for gap decorations but give us a path forward that we think resolves the related questions.

We found ourselves moving away from "intersection points" as they're defined in the spec today and instead defining gap decorations in terms of segments, or equivalently segment start and end points. The idea is similar to the change I suggested for flexbox in [this comment](https://github.com/w3c/csswg-drafts/issues/12784#issuecomment-3325813126), except also applied to (1) main-direction decorations in Flex, and (2) both directions in Grid:

<img width="749" height="1135" alt="Image" src="https://github.com/user-attachments/assets/15f1857e-d112-4f5f-a950-84e95b6c16e6" />

The X's in the above pictures are where gap decoration segments can start or end. They are always aligned with the edges of items, regardless of container type. They are also the points to which inset values are relative.

Additionally, the `*-rule-break` properties would gain an `auto` value. That would be the initial value, and it would give the `spanning-item` behavior on Grid, or the `intersection` behavior in Flex and Multi-Column.

The initial values for all of the various `inset` properties would be `0`. The percentage basis would still be the crossing gap width.

That would change the default behavior for Grid to spanning-item with 0px insets, i.e. [this example](https://drafts.csswg.org/css-gaps-1/#example-53e3c7f2):

<img src="https://drafts.csswg.org/css-gaps-1/images/example-break-spanning-item-grid.png" />

I think that's still a reasonable-looking default, and an author can reconnect the segments with a single `rule-inset` declaration. Also, the most obvious `rule-break: intersection` behavior only requires changing `rule-break`, not `rule-inset` since the latter is already `0`:

<img src="https://drafts.csswg.org/css-gaps-1/images/example-break-intersection-grid.png" />

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


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

Received on Tuesday, 11 November 2025 00:02:30 UTC