伪元素在grid容器中需显式声明grid-column或grid-area才能参与布局；仅设content: ""不指定位置会导致零尺寸或溢出；column-gap不支持颜色，须用伪元素或渐变模拟带色分隔线。
伪元素在Grid容器上定位必须显式声明grid-column或grid-area
伪元素::before和::after默认不参与网格项排列，即使父容器是display: grid，它们也不会自动成为网格子项。直接写.grid::before { content: ""; }只会渲染成一个零尺寸盒子，常被压扁或溢出容器外。
要让它真正“占据一列轨道”（比如在第二、三列之间画一条竖线），必须手动指定位置：
- 用
grid-column: 3 / 4让伪元素落在第3列线到第4列线之间（即第三列右侧） - 配合
place-self: stretch确保它撑满整列高度 - 必须写
content: ""，否则无盒模型，宽度/高度无效 - 避免只靠
left/right绝对定位——那样脱离网格流，无法响应grid-template-columns变化
给每列间隙加垂直线？别用grid-column-gap配颜色
grid-column-gap（现推荐简写为column-gap）只能控制空白间距，不能设颜色或边框样式。很多人试图写column-gap: 2px solid #ccc，结果发现完全无效——因为该属性只接受长度值，不支持颜色或样式。
真要实现「带色竖线」分隔，得靠伪元素模拟：
- 容器设
position: relative，方便伪元素绝对定位 - 用
grid-column: 2 / -1定位第一个伪元素，再叠加多个grid-column: n / n+1来覆盖所有目标列间位置 - 每个伪元素设
width: 1px、background: #ccc、top: 0、bottom: 0 - 注意：若列数动态（如
repeat(auto-fit, minmax(200px, 1fr)))），静态grid-column会失效，此时应改用repeating-linear-gradient背景方案
grid-column值写错会导致伪元素消失或错位
常见错误是把线号（line number）当成列号（column index）。例如三列布局：grid-template-columns: 1fr 1fr 1fr，实际有4条列线（1–2–3–4），grid-column: 2 / 3才是第二列和第三列之间的间隙位置；写成grid-column: 2 / 2或grid-column: 3（单值）则不会显示——前者跨度为0，后者等价于grid-column-start: 3; grid-column-end: auto，而auto在无grid-auto-flow干预时往往不生成有效结束线。
调试建议：
- 打开浏览器开发者工具，勾选“Show grid line numbers”，直观确认线号分布
- 用负值时注意：三列布局中
grid-column: -2 / -1表示倒数第二列线到最后一列线，即最后一列右侧 - 若伪元素仍不可见，检查是否漏了
content: ""，或父容器overflow: hidden裁剪了它
需要跨行横线？优先用grid-row而非border-top
想在两行内容之间加一条横线，最稳的方式不是给每个.grid-item加border-bottom再用:nth-child()剔除最后一行——那在动态数据（如后端返回一维数组）下极易出错，尤其当最后一行不满格时。
更可控的做法是用伪元素配合grid-row：
.grid::before { content: ""; grid-row: 3 / 4; grid-column: 1 / -1; height: 1px; background: #ddd; place-self: stretch; }- 这行代码让伪元素横跨第3行轨道的全部列，位置精准且不受子项数量影响
- 若需多条横线（如每两行一条），可用多个伪元素，或改用
linear-gradient背景一次绘制 - 注意
place-self: stretch比width: 100%更可靠——后者在某些flex嵌套场景下会失效
真正难的不是画线，而是让线始终对齐轨道边界。一旦用了padding或gap，伪元素的top/left偏移就得重新算，这时候grid-row/grid-column定位的价值才真正体现出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
