配了五年 Grid，每次卡片之间加分隔线都要靠黑魔法——今天 Chrome 149 把这件事彻底做进 CSS 了

用 Grid 画过卡片列表吗？给卡片之间加分隔线这件事，大概是前端最老的白嫖需求之一了。以前只能靠子元素 border、::after 伪元素或者塞空 div 来解决——每次改布局行数列数，选择器就要跟着改。

Chrome 149（2026年6月）终于把这件事做进 CSS 本身了：column-rule 和 row-rule 这两个属性，现在可以直接画在 grid/flex 的间隙里，不再需要任何 DOM hack。

旧三件的坑

在 gap decorations 出现之前，给 grid 卡片之间加分隔线有三套常用方案：

子元素 border 叠加：只在相邻元素共享的边上手动加 border，需要 :not(:last-child) 配合选择器，改行列数就崩。

.card:not(:last-child) {
  border-right: 1px solid #e5e7eb;
}

::after 伪元素 absolute 定位：相对父容器定位，分隔线位置和 gap 绑定但不自动对齐，容易跑偏。

空 div 垫片：最暴力的解法，插入无意义的 DOM 节点，语义和可维护性都极差。

这三个方案有一个共同问题：视觉和结构耦合。gap 大小一变，分隔线就得跟着调；行列数一改，选择器就要重写。

核心语法

Chrome 149 把 multi-column 布局里早已存在的 column-rule 属性扩展到了 grid 和 flex，新增了对应的 row-rule：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  /* 列间距分隔线（竖线） */
  column-rule: 2px solid #e2e8f0;

  /* 行间距分隔线（横线） */
  row-rule: 1px dashed #cbd5e1;
}

语法和 border 家族完全一致，每个轴都有 -width、-style、-color 三个子属性，也可以用 rule 简写同时控制两个方向：

/* 四个方向统一一条分隔线 */
.card-list {
  gap: 16px;
  rule: 1px solid #e5e7eb;
}

精细控制：inset / overlap / visibility

光有基本线还不够，实战里需要三个高级控制能力：

1. 缩进（inset）—— 线不贴边

默认分隔线撑满整个 gap，但很多设计里线两端要缩进一点：

.grid-container {
  column-rule: 1px solid #3b82f6;
  column-rule-inset: 8px; /* 两端各缩进 8px */
  row-rule: 1px solid #10b981;
  row-rule-inset: 12px;
}

更精细的控制：-cap 控制不跨 gap 的端点，-junction 控制交叉点的端点：

/* 交叉点融合成完整格线 */
column-rule-inset: 8px;
column-rule-overlap: overlap-join; /* 列线在上，横竖交叉处形成完整方格 */

2. 可见性（visibility）—— 空格子不画线

当 grid 里有跨行跨列的大卡片时，分隔线会穿到空白区域里去，看起来很丑。rule-visibility-items 可以精确控制：

/* 只在有内容的元素周围画线，空格子留白 */
rule-visibility-items: around; /* 每个元素周边画线，而非穿过空白 */

可选值：all（默认，全画）、around（只在有内容区域周围）、between（只在相邻元素之间）。

3. 交替样式—— 彩色条纹

column-rule-width 和 column-rule-color 支持 repeat() 语法，可以交替颜色或粗细：

grid-template-columns: repeat(3, 1fr);
gap: 16px;
column-rule-color: #fbbf24, #34d399; /* 黄绿交替 */
column-rule-width: repeat(2, 1px), 4px; /* 两细一粗交替 */

实战：一个人站主页改造

Jake Archibald 在 web-standards.dev 博客里演示了用 gap decorations 改造一个个人网站的全过程——从 flex 导航栏的竖线分隔、到多列博客卡片区域、再到 about 页图文并排的竖线——全程没有插入一个空 div，每一步都是纯 CSS：

• 导航栏用 column-rule: 1px dashed 替代 ::after 方案
• 博客 grid 用 rule-visibility-items: around 避免跨栏大卡片穿线
• 链接区用 rule-overlap 让列线叠在行线上形成完整格线
• 每步都加了 @supports 渐进增强，Firefox/Safari 用户体验降级但功能完整

完整代码可以在他的博客里找到，地址在 web-standards.dev。

浏览器支持现状

Firefox 和 Safari 参与 standards 讨论但尚未实现，State of CSS 调查连续三年把 gap styling 列为最期待功能，最终会全面落地。

当前推荐用渐进增强策略：先实现功能，再按需加装饰层，不需要 polyfill 也能正常工作。

下一步

1. 审计现有项目中用了 border hack 或空 div 的 grid/flex 布局
2. 替换为 column-rule/row-rule，顺便把子元素上多余的 border 清理掉
3. 如果项目需要兼容 Firefox，用 @supports (column-rule: 1px) 做能力检测，只在支持的环境启用装饰层

gap decorations 解决的问题看起来小，但它把 CSS 布局引擎的美感还给了开发者——视觉和结构解耦，改布局不再需要动选择器。