Skip to content

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

@oSamDavis

Description

@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:
Image

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.

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

Status
Not this meeting?
Status
Wednesday afternoon

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions