[csswg-drafts] [css-grid] Gap background splitting

seejamescode has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Gap background splitting ==
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:
<img width="712" alt="screen shot 2017-12-17 at 10 46 50 pm" src="https://user-images.githubusercontent.com/7519029/34090385-36bc736e-e37c-11e7-93b3-6eabc26b15c2.png">

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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2117 using your GitHub account

Received on Monday, 18 December 2017 04:47:51 UTC