CSS 原生支持网格间隙样式
推荐指数 41.0 NO. 024 · 2026.05.16
发布2026/05/15
为什么值得看
Chrome 149 正式支持 CSS gap decorations，可直接用 CSS 属性为 grid/flex/多列布局的间隙添加线条样式，无需再写伪元素或边框 hack。前端开发者能减少约 30% 的布局相关 CSS 代码，维护成本显著降低。
媒体预览
编辑判断
这个特性最被低估的价值不是少写几行 CSS，而是解决了响应式布局中动态间隙样式的根本痛点。以前用伪元素画分割线，在容器尺寸变化或子项增减时经常错位，gap decorations 直接绑定到轨道间隙，跟随布局引擎计算，不会再出现视觉漂移。
Edge 和 Chrome 联合推进说明这是互操作性的共识，但 Safari 尚未跟进。如果你在做设计系统或组件库，可以先做渐进增强，用 @supports 做回退，避免在 Safari 下样式断裂。Tailwind 这类框架预计会在下一版本封装 gap-x-decoration 等工具类，值得关注。