Grid 和 Flex 的间隙终于能划线了，CSS gap decorations 已经能用了

Grid 和 Flex 的间隙终于能划线了，CSS gap decorations 已经能用了

导语

以前做 Grid/Flex 布局时，gap 只能控制间距大小，想在间隙里加一条分割线，大多得靠伪元素、额外 markup 或者 Grid 的 border trick。现在 Chrome 149 已经把 CSS Gap Decorations 带进来了，column-rule / row-rule 终于能直接用在 grid、flex、multicolumn 里。这个变化不大，但足够实。

正文

1. 之前我们是怎么画的

最常见的是三类做法：

• 给 item 加 border，再用 gap 错开视觉；复杂场景下会把 border 也算进尺寸，要反复调 box-sizing。

• 用伪元素画线；要多维护一层定位，跨两端、跨断点时很容易崩。

• 改造成两列/两行结构，中间插一个“线条列”；本质上是把布局复杂化。

这些方案都能跑，但都有一个共同问题：装饰线和布局耦合太深。

2. 现在标准里怎么处理

CSS Gap Decorations Level 1 是在 multicolumn column-rule 的基础上扩展出来的。新版 Chrome 149 里可以看到以下能力已经落地：

• column-rule

• row-rule

• column-rule-inset

• row-rule-inset

• column-rule-visibility-items

• row-rule-visibility-items

前四个解决的是“怎么画”；后两个解决的是“什么时候显示”。特别是 visibility 控制，可以让装饰线只在相邻 item 之间显示，边缘处自动收掉，这比伪元素方案干净很多。

3. 实际怎么写

下面是一个最直观的例子：三列 Grid 里，列间隙各显示一条虚线，行间隙里不加线。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  column-rule: 1px dashed #94a3b8;
  row-rule: none;
}

如果是横向卡片列表，想给每一项之间加一条竖向分割线：

.list {
  display: flex;
  gap: 12px;
  column-rule: 1px solid #e2e8f0;
  row-rule: none;
}

再配合 column-rule-inset，可以让线条端点向 gap 内部收缩，避免紧贴 item 边框显得太硬。column-rule-visibility-items: adjacent 则可以省掉首尾空白处的多余线条，适合做列表头和列表尾的干净截断。

4. 和旧方案对比

旧方案更像“用布局模拟装饰”，新属性是“把装饰还给布局”。前者容易跟着响应式一起炸，后者更像一个标准化的 gutter skin。对组件库来说，这意味着可以少维护几套 border/伪元素 fallback，尤其是表格、卡片列表、Dashboard 这类高频网格场景。

5. 现在能用吗

Chrome 149 已经支持，对应的是比较新的 Chromium 内核版本。如果你要覆盖更老浏览器，就还是需要保留旧方案做渐进增强；但如果是面向内部工具、桌面端 Web 应用、Electron/Tauri 场景，现在就可以直接用了。

收尾

如果你正在维护一套组件库，且布局以 Grid/Flex 为主，建议先拿卡片列表或数据表格做小范围试点。判断标准很简单：以前要写两套 CSS 才能实现的 gap 分割线，现在能否只用 3~5 行标准属性实现。 能的话，就值得切过去。