[css-gaps-1] Clarify if space from content distribution properties consititues a "gutter" for decoration purposes.

[oSamDavis]

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 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/align-content. See § 12.1 Grid Sizing Algorithm. This space effectively increases the size of the gutters.

CSS Align Level 3

Gutters effect a minimum spacing between items: additional spacing may be added by justify-content/align-content. Such additional space effectively increases the size of these gutters.

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:

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.

[kbabbitt]

@oSamDavis

Just to make sure I understand, the idea would be that the "gutter" for gap decoration purposes is not the width defined by the corresponding *-gap property, but rather that width plus any additional space introduced by justify-content/align-content, correct?

That seems reasonable to me, with one comment and one question:

1. The current definition of crossing gap width is probably wrong and needs to be updated, as it does not account for that additional space.
2. While drafting up Gaps 1 I had assumed all of the gutters in a given direction (row or column) have the same width. Is it possible to construct a case using justify-content/align-content where that's not the case? If so, we might need an editing pass to account for it.