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.
Related to: https://www.w3.org/TR/css-grid-1/#gutters
From all CSS Grid Layout onboarding resources I have experienced, the
gapproperties 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
gaprules 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.