[CSS Gap Decorations] More control over where rules appear?

[o-t-w]

It's easy to specify a particular column gap where a column-rule should not appear, or a row gap where a row-rule should not appear. What about specifying a particular column or cell where a row-rule should not appear, or a particular row or cell where a column-rule should not appear? Perhaps a subgrid solution works well enough?

For a very simple "real world" example, I did try using column-rule on my personal site but didn't want them on the first row:

This is somewhat related to the issue about gap decorations in empty grid areas in that both relate to wanting more control over where gap decorations appear.

[captainbrosset]

I can think of another example where this would be useful: some designs make use a mini-separators where the line only extend for about 20px instead of spanning the entire length of the track.

See the subtle dark yellow horizontal line between the intro and the photos here:

from https://dribbble.com/shots/3768565-Photography-Portfolio-Masonry-Gallery-Grid

Here, row-rule-outset isn't enough because it doesn't let you define the size of the line. Instead, you define the size of the outset. Plus, a large outset results in a centered line, whereas the design here wants a left-aligned line.

While this isn't exactly like what @o-t-w requested, it's close enough I think.

[kbabbitt]

Thanks for the feedback and examples!

I agree there's similarity to #1099. The solution ideas I raised in that issue were:

1. Gap Decoration Areas would allow defining different sets of decorations for different sub-areas of a grid. They were included in my initial proposal, but I currently have them deferred out of level 1 to scope down to an MVP.
2. A new property to define how gap decorations interact with empty grid cells. I'd probably start with something similar to empty-cells for tables, but I think I'd want three states: (1) decorations in all gaps; (2) decorations in gaps with an item on at least one side; (3) decorations in gaps with items on both sides.

@o-t-w would either of the above work well for your use case?

@captainbrosset thanks for the asymmetric separator example as well. That use case also came up in #996, and we're discussing variants of it in w3c/csswg-drafts#12024.

[o-t-w]

I would prefer 1. grid-row-rule-area and grid-column-rule-area are easy to understand and would work well to solve this sort of use case. It’s obviously more general purpose than 2. There will be cases where developers want to omit a decoration for a cell that isn’t empty.