[css-gaps-1] Gap intersections for multicol containers

[jav099]

Background
We resolved csswg-drafts#12084 to allow intersections at the border of spanners when gaps are present. This enabled us to not paint decorations behind spanners, which is the current column-rule behavior.

Open question
For containers using column-wrap: wrap, what default behavior should gap decorations have? The reference diagram is helpful context.

We see two plausible approaches:

Option 1 — Intersections at multicol line boundaries

Intersections are placed at the start/end of each multicol line. Decorations do not span the gaps created by column-wrap unless the author opts in (e.g., via rule-outset).

Example:

Option 2 — Intersections at the center of row gap/column gap crossings

Intersections are placed at the midpoint where a row gap crosses a column gap. Decorations effectively “bridge” row gaps by default—similar to how a grid might behave—so rules continue across those breaks. While visually coherent, this may be less aligned with multicol semantics.

Example:

It's worth to note, that you can achieve Option 1 visual behavior even if Option 2 is the default, by using column-rule-break: intersection and column-rule-outset: 0.

---

Request for feedback
We’d appreciate input, especially from folks steeped in multicol and from web authors, on which of these should be the default behavior:

• Should decorations stop at column-wrap breaks unless explicitly extended (Option 1)?
• Or should they span across by default, meeting at row/column gap centers (Option 2)?

Thanks in advance!

[jav099]

@rachelandrew @mstensho, since both of you are heavily involved in multicol I was wondering if we could get your opinion on this matter. Thanks!

[mstensho]

Option 2 is pretty, well, at least as long as all rows have all columns present (maybe even then?). Is this why you're asking? I mean, I think we should have some good reasons for not behaving the same in grid and multicol.

[jav099]

I'm mainly asking to figure out what should be the default behavior for multicol (i.e. where we place the intersections). In the current implementation we are doing Option 2, which means placing the intersections at the meeting point between row gaps and column gaps. However, we were beginning to think that maybe Option 1 makes more sense semantically (which would be placing the intersections before/after the row gap). But we are not sure what authors of multicol would want / expect

[alisonmaher]

+1 I think the question here is whether the rows of columns for multicol are seen as separate and as such, their column gaps are not seen as contiguous (resulting in option 1)

Or, is it similar to grid, where the rows and columns are seen as one large group of cells, and their gutters are contiguous (option 2).

My mental model is somewhat leaning toward option 1.

[rachelandrew]

I also think option 1, in fact one of the problems of wrapped multicol is that the reading direction might be unclear. Option 1 as a default helps show that you read by row.

[kbabbitt]

It occurred to me that the same question @jav099 posed for multicol also comes up for flexbox, and they should probably have the same answer.

Re-reading the definition of flex container gaps, I think it would make sense to do the flexbox equivalent of Option 1 (here I've colored the entirety of each gap and placed crosshairs at each "intersection point"):

However, right now, the spec calls for the flexbox equivalent of Option 2, placing cross-axis intersection points in the centers of main-axis gaps:

That has some parallels with how we place intersection points in Grid, and it makes it simpler to continue decorations through flex lines when items line up with each other. But upon reflection, I think Option 1 is more in line with how flex layouts should be read.