[csswg-drafts] [css-align] Gaps around the edges of a container (#13087)

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

== [css-align] Gaps around the edges of a container ==
 _Originally posted by @yisibl in [#12602](https://github.com/w3c/csswg-drafts/issues/12602#issuecomment-3497602022)_

> I actually have another case where I'm unsure if gap decorations can achieve this layout.
> 
> It will include the outermost border, but in reality, the gap does not exist at these positions. However, perhaps a **virtual gap track** could be extended?
> 
> Currently, I'm using grid gaps combined with outlines, but this approach isn't very elegant.
> 
> - Demo 1: From [iconfont.cn](https://www.iconfont.cn/fonts/detail?spm=a313x.fonts_index.i1.d9df05512.7b053a818IKjfg&cnid=IhcTcFymWeyf&lang=en-us)
>     <img width="1738" height="888" alt="Image" src="https://github.com/user-attachments/assets/4f785654-f5fb-4cd0-a861-12491d529f0d" />
> 
> - Demo 2: Frome [Google fonts](https://fonts.google.com/noto/specimen/Noto+Serif+SC/glyphs?lang=zh_Hans)
>     <img width="1520" height="872" alt="Image" src="https://github.com/user-attachments/assets/fdd879de-c72b-4c8f-8bea-340469ad2d69" /> 

Once we have the ability to control gap decoration items in empty areas, the above use cases would become almost possible. The missing piece would be to have gap decorations around the edges of a container.

Proposal is to introduce `column-edge-gap` and `row-edge-gap`, with initial value of `0`, which accept `<length-percentage [0,∞]>`. We don't need the `normal` keyword because we don't want to differentiate between multi-col and other containers; for back-compat all should have no gaps around the edges by default.

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


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

Received on Tuesday, 11 November 2025 06:32:30 UTC