我在 grid 间隙里画装饰线套了三年 div，今天 CSS 自己会了——gap decorations 把这件事彻底原生化了

以前在 flex 格子之间画分隔线，我要套 div、算 margin、调 z-index——这套活在 2026 年终于被 Chrome 原生化了。我拿 grid 做了三年后台面板，每次要在格子之间加分割线，脑子里第一反应都是「伪元素吧」或者「给每个子项加右边框然后最后一列去掉」。这套活在 CSS 世界里属于「能跑但很丑」的解法——它依赖结构，一改布局就容易坏，还会在无障碍树里塞无意义的 DOM 节点。gap decorations 来了。这个从 Chrome 149 开始支持的特性，让 column-rule 和 row-rule 从多列布局里走出来，直接走进 flex 和 grid 的 gap 间隙里——纯视觉，不影响任何布局，不动 DOM。基础用法：css .flex-list { display: flex; flex-direction: column; gap: .5em; row-rule: 2px dashed; row-rule-color: #999; } 三行代码，分隔线自己会出现。多值 + repeat()：日历每小时实线、半小时虚线交替：css .calendar { row-rule-width: 2px, 1px; row-rule-style: solid, dashed; row-rule-color: #333, #999; } 值会循环匹配。用 repeat() 简化长序列：css row-rule-width: repeat(2, 1px), 4px; 交叉处留白：Grid 里纵横线相交，rule-break: intersection 让两线在交点自动留白。缩进控制：rule-inset: 5px 让装饰线内嵌而不撑满。不对称缩进：rule-inset-cap 控制边缘，rule-inset-junction 控制交叉点，配合 transition 做 hover 动画效果。空格画线控制：rule-visibility-items: between 仅在两个相邻项之间的间距画线，避免空格子也出现装饰线。兼容性：Chrome 149+ / Edge 149+，Firefox/Safari 待跟进。渐进增强策略，不支持的浏览器安静降级。属性速查：column-rule + row-rule（主属性）、rule-break: intersection（交叉留白）、rule-inset / rule-inset-cap / rule-inset-junction（缩进）、rule-visibility-items（空格控制）、repeat()（多值循环）。