column-rule 在 grid 布局中完全无效，因其仅适用于多列布局（display: column），而 grid 是独立模块；应在 grid 中用 grid-column-gap 配合 background、伪元素或 border-right 实现分隔线。
column-rule 不能用在 display: grid 容器上——它只对 column-count 或 column-width 触发的多列布局（即 display: column，本质是 display: block + 多列）生效。想在 Grid 中实现“带分栏符的列表”，得换思路。
为什么 column-rule 在 Grid 里完全无效
这是 CSS 规范明确限定的：column-rule 是 multi-column layout 模块的属性，而 Grid 是独立的布局模块。浏览器遇到 display: grid 容器时会直接忽略所有 column-* 属性（包括 column-rule），连 warning 都不抛。
- 检查 computed styles 会发现
column-rule值显示为not set或灰色禁用状态 - 即使强行写上
column-rule: 2px solid #ccc，DevTools 的 Layout 面板里也看不到任何分隔线渲染 - Grid 的列轨道（
grid-template-columns）和 multi-column 的“内容流式分栏”机制完全不同，二者不可混用
Grid 中模拟分栏符的三种可靠做法
核心原则：用 Grid 自身能力画线，而不是依赖已被忽略的 column-rule。
-
方案1：用
grid-column-gap+background（推荐） 设置间隙宽度，再给容器加横向平铺的背景图或渐变，只在间隙位置显形：.grid-list {<br> display: grid;<br> grid-template-columns: repeat(3, 1fr);<br> grid-column-gap: 24px;<br> background: linear-gradient(90deg, transparent 0, transparent 23px, #e0e0e0 23px, #e0e0e0 25px, transparent 25px);<br> background-size: calc(100% / 3 * 2 + 24px) 100%;<br> }注意background-size要匹配实际列数与间隙组合，3 列 → 2 个间隙 → 分母是3 * 2 + 24px的等比缩放 -
方案2：伪元素覆盖（语义干净，适合固定列数）
给每列子项加
::after，定位到右侧边界绘制竖线（最后一列除外）：.grid-list > *:not(:last-child) {<br> position: relative;<br> }<br> .grid-list > *:not(:last-child)::after {<br> content: "";<br> position: absolute;<br> top: 0;<br> right: -12px;<br> width: 1px;<br> height: 100%;<br> background: #e0e0e0;<br> }这里-12px是为了把线画在gap中间，需与grid-column-gap值对齐 -
方案3：用
border-right+:nth-child()（最直白，但需处理末尾）.grid-list > * {<br> border-right: 1px solid #e0e0e0;<br> }<br> .grid-list > *:nth-child(3n) {<br> border-right: none;<br> }适用于已知列数（如 3 列）且子项顺序严格按网格流排列的场景；若用grid-auto-flow: dense或有跨列项，此法会出错
别踩这些坑：兼容性与响应式陷阱
看似简单的分隔线，在 Grid 下容易因细节翻车：
-
background方案中，background-size用calc()时，Safari 15.4 之前不支持在background-size里嵌套calc()，得降级为 JS 计算或媒体查询硬编码 - 伪元素方案中，如果子项设置了
overflow: hidden或transform，可能裁剪掉::after线条，需确保父容器position: relative且无裁剪上下文 - 用
border-right时，如果 Grid 启用了grid-auto-flow: column（列优先填充），:nth-child(3n)就不再对应视觉末列，必须改用:nth-of-type()或 JS 动态标记 - 所有方案在
grid-template-columns: minmax(200px, 1fr))这类弹性列下，分隔线位置都可能随内容撑开偏移——此时只能用方案1的背景渐变，靠百分比定位才稳定
真正麻烦的不是画一条线，而是让这条线在 Grid 的各种弹性、响应、自动流行为下始终对齐间隙中心。多数人卡在“以为 column-rule 能通用”，其实从第一步就走错了方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
