Skip to content

[css-grid-2] Suppression of gaps/gutters across fragment breaks #11520

Open
@kbabbitt

Description

Grid 2, and Grid 1, state:

If a grid is fragmented between tracks, the gutter spacing between those tracks must be suppressed.

As far as I can tell, this behavior is unique to Grid; I did not find anything similar for Flexbox or Multi-Column. It's also not currently interoperable: Gecko does suppress gutters that fall on fragment breaks; Blink and Webkit do not. Test case written by @oSamDavis: https://codepen.io/kevinbcmu/pen/ByBVZyN

In reading the discussion for the resolution on the previous issue about this, I wasn't clear on the motivations for the spec'ed behavior, or why they would be unique to Grid. It sounds like it has to do with preserving alignment of backgrounds to content, but I don't understand how that leads to the sentence in the spec. The Blink behavior when fragmenting a gutter is to behave such that stitching together the fragments would produce the same result as not fragmenting, in other words do not add or remove any space at all. Wouldn't that behavior be the one that preserves alignment, rather than suppressing the gap which would change the stitched-together size of the grid?

Here's a variant of the testcase above; notice the positions of the X's in the background-image relative to the text in the grid items in the unfragmented vs fragmented variants: https://codepen.io/kevinbcmu/pen/LEPBRLV

Blink:
Image

Gecko:
Image

The reason I bring this up has to do with Gap Decorations. In a future version of the spec, I hope to introduce support for gap decoration images. With that possibility in mind, I can envision cases where suppressing the gap + decoration across a fragment break might be undesired or even lead to information loss. Given that the behavior is not interoperable, and the specification of it is inconsistent with other container layout types, I'd like to propose removing it.

cc @alisonmaher @bfgeek @tabatkins @fantasai @mstensho

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions