grid-column-gap 仅对 display: grid 生效，flex 布局需改用 column-gap 或伪元素/渐变/box-shadow 等方案实现垂直分隔线。
grid-column-gap 无法在 flex 布局里生效
很多人试了 grid-column-gap 却发现垂直分隔线没出来，其实是因为用了 display: flex —— 这个属性只对 display: grid 生效。Flex 布局得换思路。
实操建议：
- 确认容器是
display: grid，且设置了明确的列数（如grid-template-columns: repeat(3, 1fr)） - 用
column-gap（grid-column-gap已废弃）控制垂直间距，值设为正数即可生成“空白分隔线” - 如果需要的是「有颜色的线」而非留白，
column-gap不够用，得往下看伪元素方案
::before 和 ::after 无法直接给 grid 子项加垂直线
想给每个 grid item 右侧加一条线？别急着给 item::after 设宽高——子项默认不参与网格线绘制，伪元素定位容易错位或被裁剪。
更稳的做法是：把伪元素加在 grid 容器上，用绝对定位模拟纵向线。
立即学习“前端免费学习笔记（深入）”；
示例关键点：
- 容器设
position: relative - 伪元素用
top: 0; bottom: 0; width: 1px; background: #ccc; - 通过
left计算每条线位置，比如三列布局中第二条线在left: calc(33.33% + 1px)（注意加上前一条 gap 宽度） - 避免用
nth-child给多个伪元素硬写，改用 CSS 变量 +repeating-linear-gradient更干净
background: repeating-linear-gradient 的坐标容易算错
用背景渐变画垂直线看似简单，但 background-position 和 background-size 配合稍有偏差，线就会偏移、断开或重叠。
典型错误现象：repeating-linear-gradient 画出的线只在顶部显示一截，或间隔忽大忽小。
正确做法：
- 设容器
background: repeating-linear-gradient(to right, transparent 0, transparent 100px, #eee 100px, #eee 101px); - 其中
100px是列宽 + 间隙，1px是线宽；必须保证“透明段 + 线段”总长 = 列周期 - 配合
background-size: 200px 100%;（两列周期），再用background-origin: content-box;避免边框干扰 - 注意：该方案在
grid-auto-flow: column或响应式列数变化时会失效，只适合固定列数场景
border-right 在最后一列多画了一条线
最常用也最容易翻车的方案：给每个 grid item 加 border-right: 1px solid #ddd;。结果最右边那列也带线，破坏视觉平衡。
解决它不能只靠 :not(:last-child) —— 因为 grid item 的 DOM 顺序和视觉列顺序可能不一致（尤其用了 grid-column-start 手动定位时）。
稳妥方式：
- 用
grid-column-end: -1控制最后一列显式结束，再结合:nth-child(n+1):not(:nth-child(3n))（假设三列）选中非末尾项 - 或者放弃 border，改用
box-shadow: 1px 0 0 0 #ddd，再用overflow: hidden裁掉容器右侧溢出阴影（比 border 更易控） - 若列数动态（如
auto-fit），优先考虑伪元素或渐变方案，border 类方案基本不可维护
真正麻烦的不是画一条线，而是让线在响应式、跨行、内容高度不均、甚至 RTL 布局下还保持对齐。这时候伪元素 + inset 定位或 conic-gradient 模拟线反而更可控——但代价是代码可读性下降。选哪种，取决于你愿不愿意为“看起来整齐”多 debug 十分钟。
