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

> I'll note that variable-sized gaps directly impacts our ability to do gap images (#2748) in anything remotely similar to a `border-image` style. I think it's an either/or proposition.

I claim that variable-sized gaps and gap images can work quite well together. And we already need to solve this, anyway, because horizontal and vertical sizes can already differ.

-----

> To expand on this, border-image requires specifying 4 stretchable/tileable images, one for each side because the sides can be different sizes. These four sides intersect at four corners, so you need 4 corner images as well. (Conveniently, we can combine these 8 images into a single image that we slice up.)
> 
> Gap images will require 6 images for the "straight" sections - two endcaps and one stretchable/tileable part each, for the two axises. Then you need images for the intersections as well

@MatsPalmgren's [proposed spec.](https://matspalmgren.github.io/css-gap-decorations/Overview.html), we sticks with 6 images. Though it reuses the end caps for the intersections.

> I _think_ you end up needing 17 to fully cover the intersection possibilities.

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.

-----

Anyway, the different proposals related to gap images already define a thickness for them. So the width of the gap and the width of the image can be set individually and they work independently from each other. Mats' spec. has an [animated example illustrating that](https://matspalmgren.github.io/css-gap-decorations/Overview.html#example-0518370f).

Also, here's an example how variable-sized gaps and gap images could look (please don't judge my painting skills, it's just for illustration):

![Grid with variable-sized gaps and gap images](https://user-images.githubusercontent.com/958943/236562429-284d5b22-f321-43f0-8c37-746253bea932.png)

If we _want_ the gap sizes and image sizes to work together, we could define a way to let the rule width be influenced by the gap width. In that case, the different images would need to be stretched or squeezed in the cross-axis to the rule depending on the gap's width.
Having said that, I'm not sure whether there are any use cases for such a behavior.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1659#issuecomment-1536749798 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 20:31:37 UTC