Re: [csswg-drafts] [css-grid] Control size of individual gutters independently (#1659)

> And we already need to solve this, anyway, because horizontal and vertical sizes can already differ.

Yes, the fact that vertical and horizontal sizes can differ is why you need 6+13 images in total to duplicate the power of border-image for gap images.

> @MatsPalmgren's [proposed spec.](https://matspalmgren.github.io/css-gap-decorations/Overview.html), we sticks with 6 images.

Mats' proposed spec is significantly weaker than border-image. It cannot represent custom intersections in the same way that border-image can represent interesting corners; all it can do is overlap things.  Maybe that's a weakness we're okay with! (It's almost certainly one we'd have to live with to get variable-width gutters.) But it's not one we can take for granted.

> I wonder how you get those 17. 6 images plus 2 intersection images are 8. Or if you want to, you could require another stretchable/tileable image between the intersection and the end cap, then you'd have 10 in total.

Sorry, I meant 13.

A rule can cross thru an intersection, or only enter from one side and not exit the other.  There are thirteen combinations of these possibilities, when taking both axises into account: one 4-way intersection (both rules fully cross the intersection), four 3-way intersection (one rule goes fully thru the intersection, the other only comes in from one edge), four 2-way corner intersections (each rule only comes in from one edge), and four 1-way intersections (one rule comes in from one edge, without fully crossing). That's 13 in total.

For example, imagine a border-image that's an iron frame with vines wrapping around it. You can do this with the 8-slice technique, with only minor restrictions on your design. You absolutely cannot do an equivalent gap-image with "just overlap them", unless you specifically want that sort of design. You need custom images for each intersection, instead.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 5 May 2023 21:18:18 UTC