[css-grid] Gap background splitting

[seejamescode]

Related to: https://www.w3.org/TR/css-grid-1/#gutters

From all CSS Grid Layout onboarding resources I have experienced, the gap properties have been described as the rules to handle your grid gutter with. I think it is helpful when the grid follows a single background color (Ex 1) or every item includes extra padding (Ex 2).

However, many visual designers use background color to identify separations in a grid (Ex 3). This is a common use-case that I hope CSS Grid Layout can support:

The current way to achieve this use-case is to use no gap rules and instead apply a padding class to all items on the grid.

Proposed Solution:

Introducing a new property and rule for the grid parent called gap-background: split; that would let the background values of adjacent items expand to meet halfway at the gutter. I am proposing this solution because I believe it would give CSS Grid Layout the capabilities that print-based designers would assume it had.

[Nadya678]

I think the "ignore-gap" for concrete "cells" will be better solution. The grid cell will be enlarged 0.5 size of gap in all direction if ignore-gap is enabled.

[seejamescode]

@Nadya678 It sounds like that will help when there is single items on the grid that need to ignore gap. In the situation I describe above though, that would mean I still need to apply padding to all grid items. Correct?

[SelenIT]

In the given example, I see the gap between the columns twice as wide as gaps between the edges and the columns. This is not how gap works. I'd say that these free space areas are not gutters at all, but the extra grid tracks used for negative space (like in this well-known example of the full bleed grid layout) or. at least, the middle gutter is actually two gutters around a virtual zero-width column, and we can attach the grid items to this virtual column lines (like in this JSfiddle example). We can even use separate (pseudo-)elements for this, attaching the content and the decorations to different grid lines (as shown in the last row of the example), to avoid need to recalculate paddings for grid items.

So I don't see the need to introduce extra complication like suggested here. I'm for keeping the gutter concept as simple as it is, and using existing grid features for creating areas with background.

[tabatkins]

This doesn't seem very compatible with the CSS box model; for example, where's the border in this example? The fact that it can be fairly simply achieved with 'padding' suggests that it doesn't need to be specially solved for Grid here, which would introduce extra complexity to the Grid model, both for authors and for implementors.