在css grid中精确定位伪元素实现装饰性分隔线，核心做法是将网格容器设为 display: grid 并定义好行列轨道，然后利用 grid-column 和 grid-row 属性将伪元素 ::before 或 ::after 强制放置到特定的网格单元中。通过设置 position: static（覆盖默认的 relative）确保伪元素遵循网格布局而非脱离文档流，再配合 width、height 和 background 绘制线条。若网格中存在空白轨道，伪元素可直接占据该空间；若需跨越多个单元格，可使用 span 关键字。这种方法比绝对定位更稳定，能随内容自动调整位置。
如何将伪元素固定在第2列并跨越整行？
要将伪元素固定在第2列并跨越整行，只需在伪元素的样式中指定 grid-column: 2 / span 1 和 grid-row: 1 / -1。这表示伪元素从第2列开始，宽度为1个轨道，高度从第1行延伸至最后一行。前提是父容器已定义至少2列和足够多的行。此方法适用于侧边栏装饰或垂直分割线场景。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.container::after {
content: "";
position: static; /* 关键：让伪元素参与网格布局 */
grid-column: 2 / span 1;
grid-row: 1 / -1;
background-color: #ff0000;
width: 2px;
}
预期结果：红色竖线出现在第2列，贯穿所有4行，宽度2像素，不干扰其他网格项的布局。
如何在网格交叉点放置圆形装饰点？
要在网格交叉点放置圆形装饰点，可将伪元素放置在特定的网格单元中心，例如 grid-column: 1 / span 1 和 grid-row: 2 / span 1。通过设置 border-radius: 50% 和固定宽高实现圆形。需注意伪元素默认是块级元素，需确保其尺寸小于网格单元以避免溢出。此技巧常用于时间轴或节点图装饰。
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.grid-container::before {
content: "";
position: static;
grid-column: 2;
grid-row: 2;
width: 20px;
height: 20px;
background-color: blue;
border-radius: 50%;
}
预期结果：蓝色圆点位于第2行第2列的中心，直径20像素，不影响周围网格项。
当网格轨道未定义时伪元素会如何表现？
当网格容器未显式定义 grid-template-columns 或 grid-template-rows 时，浏览器会自动生成隐式轨道。此时若伪元素使用 grid-column: 5 等超出显式定义的索引，它将落入新创建的隐式轨道中。这些隐式轨道的高度默认为 auto，可能导致伪元素所在行高度异常增大。为避免此问题，应始终显式定义网格结构，或使用 minmax() 控制最小尺寸。此外，若伪元素未指定 position: static，它将保持 relative 状态，脱离网格流，导致定位失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
