CSS 间隙装饰正式可用

CSS 间隙装饰正式可用，网格与弹性布局更精细

2026 年 8 月初，CSS-Tricks 发布文章确认：CSS 间隙装饰（gap decorations）已在 Chrome 与 Edge 149 中全面可用。这是布局领域的又一次"去掉 JS 补丁"的进展——以前需要额外 DOM 元素或伪元素才能实现的间距分割线，现在可以用纯 CSS 直接声明。

什么是间隙装饰

在网格（Grid）或 Flexbox 布局中，gap 用来定义项目之间的间距。间隙装饰让开发者能直接给这些间距绘制线条与样式，类似多列布局（multicol）里 column-rule 的用法。通过 column-rule 与 row-rule 属性，可以分别控制列间距与行间距的线条：

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

过去要实现"每两列之间有一条分隔线"的分割式卡片布局，通常要写一堆边框伪类或者插入真实的分隔元素。现在一个属性就能搞定，而且间距与线条天然对齐——当项目换行时，分隔线也会随之正确分布。

一个定价表实战案例

以最常见的"三档定价卡"为例。过去要在两列之间画竖线，常见做法是给每个卡片加 border-left，再处理首列去边框的逻辑；现在直接这样写：

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  column-rule: 1px solid #e5e7eb;
}

注意这里把 gap 设为 0、用 column-rule 单独控制分隔线宽度，表格行的虚线下划线同理用 row-rule。断点变化时，比如平板从三列变两列，分隔线会自动跟随列数重排，媒体查询里不再需要"删掉多余边框"的补丁。

在 Flexbox 里也能用

间隙装饰并不只属于 Grid。纵向排列的导航、横向滚动的卡片列表，同样可以给 row-gap 或 column-gap 声明线条。比如一个"功能特性列表"，希望每两行之间有一条浅色分隔线：

.feature-list {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  row-rule: 1px solid rgba(0, 0, 0, 0.08);
}

这里的语义很直观：row-rule 画的是行与行之间的线，column-rule 画的是列与列之间的线，无论容器是 Grid 还是 Flexbox 都适用。相比给每个子元素加 border-bottom、再处理"最后一项去掉边框"的写法，声明式属性明显更省心，也更好维护。

一个典型的收益场景：某团队的套餐对比页每季度要调整列数（从三列变四列），过去每次都要改三四个组件的边框逻辑。改用 column-rule 后，只需要改 grid-template-columns，分隔线自动跟随，联调时间从半天压缩到十几分钟。这种"少写代码还能少出 bug"的收益，是团队愿意跟进新特性的直接动力。

为什么这对前端团队很重要

减少 DOM 噪音：不再需要为了视觉分隔而添加多余的 div 或 span，结构与样式彻底解耦，对可访问性也更友好。
响应式更省心：网格断点变化导致项目数量变化时，间隙装饰会自动跟随 gap 重排，不必在媒体查询里反复修补。
表格与价格页的利器：需要"每行一条虚线、每列一条实线"的数据表、定价卡、特性对比区块，都能直接用 row-rule/column-rule 表达。

兼容性与降级

截至 2026 年 8 月，间隙装饰以 Chromium 系浏览器（Chrome、Edge 149+）支持为主，Safari 与 Firefox 尚在跟进，Web Platform Tests 的数据显示该特性正在走向 Baseline "Newly available" 阶段。上线前建议：

用 @supports (column-rule: 1px solid #000) 做特性检测；
不支持的浏览器走降级方案——保留 border 伪类，或接受无分隔线的简洁版式；
多浏览器测试时重点看"项目换行后分隔线是否错位"这一场景。

常见疑问

间隙装饰会改变盒模型的尺寸吗？ 不会。column-rule/row-rule 画在 gap 内部，不占用项目本身的空间，也不会引发额外开销。

能不能画带圆角或渐变的线？ 目前 column-rule/row-rule 沿用 border 的简写语法（宽度、样式、颜色），暂不支持圆角或渐变；更复杂的装饰仍需伪元素。

Safari 用户怎么办？ 用 @supports 特性检测做降级，或把分隔线当作"渐进增强"——不支持时页面只是没有装饰线，布局本身不受影响。

与其它现代 CSS 特性一起用

2026 年正是"用 CSS 代替 JS 补丁"的高峰期。除了间隙装饰，field-sizing（表单控件自适应大小）、text-fit（字号自动缩放）、focusgroup（声明式键盘导航）都在陆续进入稳定版。配合Web Components与动画性能优化，前端可以做出更轻、更顺滑的页面。

16IDC 观察

布局能力的每一次"少一个 JS 补丁"，都在降低建站成本。对使用前端框架或纯 HTML/CSS 搭建站点的团队来说，跟进这些 Baseline 级 CSS 特性，比引入更大的框架更划算。需要注意的是，间隙装饰目前以 Chromium 系浏览器支持为主，生产环境记得先看前端搭建分类中的兼容性实践，用降级方案兜底。

原文来源：https://css-tricks.com/css-gap-decorations-now-available/
参考：MDN column-rule https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-rule

CSS 间隙装饰正式可用，网格与弹性布局更精细