[csswg-drafts] [css-gaps-1] Calrifying if space from content distribution properties consititues a "gutter" for decoration purposes. (#12922)

oSamDavis has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-gaps-1] Calrifying if space from content distribution properties consititues a "gutter" for decoration purposes. ==
Gutters are typically defined by the `row-gap`/`column-gap` css properties. However, there could be a "gutter" (space between tracks) as a result of content-distribution properties. 

The [CSS Grid Layout](https://drafts.csswg.org/css-grid/) and CSS Box Alignment spec suggest that the space as a result of alignment properties is a part of the gutter:

CSS Grid Level 2 

> Additional spacing may be added between tracks due to [justify-content](https://www.w3.org/TR/css-align-3/#propdef-justify-content)/[align-content](https://www.w3.org/TR/css-align-3/#propdef-align-content). See [ยง 12.1 Grid Sizing Algorithm](https://drafts.csswg.org/css-grid/#algo-grid-sizing). This space effectively increases the size of the [gutters](https://www.w3.org/TR/css-align-3/#gutter).

CSS Align Level 3
>Gutters effect a minimum spacing between items: additional spacing may be added by [justify-content](https://www.w3.org/TR/css-align-3/#propdef-justify-content)/[align-content](https://www.w3.org/TR/css-align-3/#propdef-align-content). Such additional space effectively increases the size of these [gutters](https://www.w3.org/TR/css-align-3/#gutter).

The phrase **"...effectively increases the size of the gutters."** implies this space should be treated as a gutter for all purposes (including painting decorations).

### Example:
Consider the following grid container where the gap is explicitly set to 0px, but `align-content: space-between` creates visible space between row tracks:

```
<style>
.wrapper {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 0px;
  align-content: space-between;
  row-rule: solid;
}
</style>
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>
```

Based on the specs, it seems like this is an accurate representation of what the rendered result should be with the `row-rule` property:
<img width="534" height="546" alt="Image" src="https://github.com/user-attachments/assets/a2a478ec-f45d-4011-88ff-3f4419fe1d02" />

### Precedent in Multi-Column Layout:
A little tangential but somewhat related: Today, there is existing precedent for separting the concept of gap's size from the drawing of a rule. As @kbabbitt noted in a meeting offline, in multi-col layout a column rule is drawn even when column gap is set to 0px. This might also hint that a rule can be drawn in the "conceptual" space between tracks, independent of spacing value.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12922 using your GitHub account


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

Received on Thursday, 9 October 2025 17:17:21 UTC