column-rule是唯一专为css多列布局设计的列间分割线属性，必须配合column-count或columns使用，不占布局宽度、居中于column-gap内，仅支持纯色简单线型，不适用于flex/grid等非多列场景。
column-rule 是唯一合法且直接生效的属性
在真正的 CSS 多列布局（即由 column-count 或 columns 触发的布局）中，column-rule 是唯一专为此场景设计的列间分割线控制方式。它不占布局宽度，自动居中落在 column-gap 间隙内，且支持 column-rule-width、column-rule-style、column-rule-color 三部分组合写法。
常见错误是把它用在 <table> 或 Bootstrap <code>.col 上——那不是多列布局，浏览器会静默忽略。
-
column-rule: 2px dashed #666等价于分别写三个子属性，推荐简写 - 必须配合
column-count: 3或columns: 150px 3才能激活，单独设无效 -
column-gap值太小（如0）时，column-rule会被压缩甚至不可见；建议column-gap≥column-rule-width - 不支持
border-image或渐变，只能是纯色或简单线型（solid/dashed/dotted）
为什么给 div 加 column-count 后 column-rule 没反应
最常踩的坑是容器内容高度不足，或者内部元素设置了 break-inside: avoid 导致无法分栏。
- 容器需有明确高度（如
height: 300px）或足够多的内容，否则浏览器可能只渲染一列，column-rule无处可画 -
<p></p>、<div> 默认允许断行，但若子元素写了 <code>break-inside: avoid，整块内容会被强塞进第一列，后续列为空 - Flex 或 Grid 子项会破坏多列流，确保直接子元素是普通块级流内容（如
<div>item</div>，而非<div class="d-flex">） <li>检查开发者工具里该容器是否真被识别为 multi-column：Computed 标签下应有 <code>columns、column-count等生效值 - 当用
@media (max-width: 768px) { .multi-col { column-count: 1; } }时，column-rule仍存在但无视觉效果——建议同步重置：column-rule: none - 不要依赖
column-rule做精确对齐：它始终居中于column-gap，而 gap 宽度受父容器宽度影响，小屏下 gap 可能小于 rule 宽度，导致线被裁切 - 如果需要不同断点下不同样式的分隔线（比如桌面端实线、移动端虚线），必须用媒体查询分别写
column-rule，不能只改颜色 - Flex 容器：给左项加
margin-right+ 伪元素::after绘制竖线，或直接用border-right（注意box-sizing: border-box） - Grid 布局：用
grid-column-gap配合background在 gutter 里画线，或在::before伪元素上绝对定位 - Bootstrap
.col：用border-right加在左列，配合border-right-sm-0控制小屏隐藏 - 表格：老实用
border-collapse: collapse+td, th { border-right: 1px solid #ddd; }，再用:last-child去掉最右线
column-rule 在响应式场景下的坑
column-rule 不会随屏幕缩放自动适配，也不响应媒体查询中的列数变更，容易在断点切换时出现“线还在但列没了”或“列变了但线没更新”的错位。
替代方案：不用 column-rule 怎么加竖线
如果你的实际结构不是多列流（比如是 Flex/Grid 布局、Bootstrap 栅格或表格），强行套用 column-rule 不仅无效，还会掩盖真实布局问题。
真正难的不是加一条线，而是确认你用的是什么布局模型——column-rule 只认多列流，其他都得绕开它。
