Re: [csswg-drafts] [css-grid][css-flexbox][css-multicol] Styling Gaps/Gutters (#2748)

I think it would be nice to have per-axis properties for this so that we can have independent styling for each axis. I think we can re-use the existing [column-rule](https://drafts.csswg.org/css-multicol/#cr) properties and just add corresponding `row-*` properties. And then add a shorthand to specify both at the same time, e.g.
`rule: <row-rule> [ '/' <column-rule> ]?`.

Regarding `gap-rule-length`: it might be better to add a `rule-inset` property instead of having to deal with percentages. Especially if we add an option to extend the rule to the length of the tracks or the length of the content box (which may be different as [illustrated in this example](https://drafts.csswg.org/css-grid/#grid-align)), then it's probably easier to use an "indentation" rather than specifying a length.

Regarding `gap-rule-interrupt`: this is nice, but might be a bit tricky to implement for images, especially if you want to stretch the image to the full rule length and slice pieces away, as opposed to rendering each segment as a separate image. I guess you could emulate it by using an opaque `row-rule-image` that is as large as the `row-gap` to simply hide the `column-rule-image` by overlapping it (assuming the row rules renders on top). An alternative would be to add a property to control the extent explicitly, e.g. `column-rule-extent: [ auto | content | segment ]`, for example:

![image](https://user-images.githubusercontent.com/4010828/80659350-0c50dc80-8a89-11ea-8e3e-1c2316d56867.png)
I think that might be simpler to implement.

@fantasai I'm not sure I understand what you're referring too with "rules that can reasonably interact with spanning elements". Are you saying that rule segments that have a spanning item crossing it should be canceled? Including abs.pos. children? If so, does the rule start again at the gap start edge or at the next track start edge?

Regarding support for images: has there been any prior discussion on supporting that in the existing `column-rule` properties? (I'm a bit surprised it isn't already supported and I'm wondering if there were any issues with it.)

Finally, all these properties should apply to all boxes that support gaps, so including flex containers too. (And between items in the masonry axis too, if [this proposal](https://github.com/w3c/csswg-drafts/issues/4650) is adopted.) (Updating the issue subject accordingly.)

-- 
GitHub Notification of comment by MatsPalmgren
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621543304 using your GitHub account

Received on Thursday, 30 April 2020 00:35:55 UTC