Re: [csswg-drafts] [css-grid-2] Suppression of gaps/gutters across fragment breaks (#11520)

If gaps were just spacing (and not something that can be decorated), suppressing them would make a little more sense (if flex and grid agree, at least). Then gaps would be kind of like margins, and margins get truncated at fragmentation breaks.

I'd like to point out that Blink (and also Gecko to some extent, I believe, although Gecko only supports table fragmentation when printing, not in multicol) truncate table border-spacing at fragmentation breaks. And border-spacing is kind of like gaps (although it cannot be decorated). The table spec doesn't say anything on the topic. There's a short discussion between myself and myself here: https://issues.chromium.org/issues/40228700 . I did it like this in Blink in order to be consistent with border-spacing before repeated table header groups (slicing makes absolutely no sense there, and not truncating would cause implementation difficulties).

```html
<!DOCTYPE html>
<style>
  .table {
    display: table;
    border-spacing: 20px;
    background: pink;
  }
  .table > div {
    display: table-row;
    height: 30px;
    break-inside: avoid;
    background: cyan;
  }
</style>
<div style="columns:3; column-fill:auto; height:155px; background:yellow;">
  <div class="table">
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    <div>ddd</div>
    <div>eee</div>
    <div>fff</div>
    <div>ggg</div>
  </div>
</div>
```

Blink:
![Image](https://github.com/user-attachments/assets/69f950a2-03e5-4a7a-973c-d5ca3593509c)

Anyway, there are pros and cons for gap fragmentation slicing vs truncation. Truncating may indeed reduce the stitched-together container size (like margins also already do BTW), but at the same time, fragmentation itself typically *increases* the stitched-together container size, because there's usually some unused space at the end of each fragmentainer, due to hard breaks, soft break preferences, monolithic content (such as lines), and so on.

Gap decorations makes it less attractive to truncate, and somewhat more attractive to slice. Another option would be to make the gaps monolithic, like border and padding. Or omit the gaps completely at fragmentation breaks, and also omit gap decoration then, obviously (is this a bit like table border collapsing?). But you're concerned about losing information that way, if the gap decoration is an image...

No matter what the decision is, though, flex, grid and multicol should agree on it. Spec this in https://drafts.csswg.org/css-align-3/#gaps ?

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


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

Received on Monday, 20 January 2025 09:01:34 UTC