column-count设了没反应，主因是父容器缺乏“可分空间”：需满足块级元素、足够宽度/内容或明确高度限制（如min-height），且避免overflow:hidden裁切列内容。
column-count 设了没反应？先看父容器有没有“可分空间”
写上 column-count: 3 却还是单栏显示，大概率不是语法错，而是浏览器压根没触发分栏逻辑。CSS 多列布局需要两个硬性前提：父容器必须是块级元素，且要有「足够宽度 + 足够内容」或「明确高度限制」。
- 宽度不够：如果父容器
width太小（比如200px），而内容自然宽度更小，浏览器会直接放弃分栏，退化为单列 - 高度陷阱：
column-count在无高度约束的容器里常失效——尤其当内容少时。加个min-height: 300px立刻可见效果 - 别用
overflow: hidden盖住底部：它可能把后几列裁掉，让你误以为没分栏 - 动态插入内容后，记得触发重排：
el.offsetHeight是最轻量的强制重排方式
文字/卡片被劈开？break-inside: avoid 不是万能的
column-count 默认按文本流切片，完全不认语义边界。一个 <h2> 加一段 <p> 很可能被拆到两列，阅读体验极差。但 break-inside: avoid 并非对所有元素都起作用。
- 只对正常文档流中的块级盒生效：
display: block、display: flow-root可以；display: inline-block、flex或grid子项会被忽略 - 必须加在要保护的子元素上，不是父容器：
article > h2, article > p { break-inside: avoid; } - Safari 旧版本（iOS 14.x 及更早）对
-webkit-column-break-inside: avoid支持不稳定，必要时需降级处理 - 图片、iframe 这类替换元素默认不可分，但若外层包了
div又没设break-inside，照样被劈
column-count 和 column-width 到底该用哪个？
二者语义冲突，不能同时设具体值。选谁取决于你控制优先级：要固定列数（如报纸三栏版式）就用 column-count；要响应式适配（小屏 1 列、大屏自动变 2–3 列）就用 column-width。
-
column-count: 3强制分三栏，哪怕容器只有400px宽，每列也会被压缩到约120px，文字行长过短影响阅读 -
column-width: 18em是提示“每列至少这么宽”，浏览器自动算出实际列数；再加column-count: 4是兜底上限，防止单列窄于100px - 移动端慎用
rem/em设column-width：系统字体缩放会改变计算结果，导致 iOS Safari 突然退化为单列 - 测试时务必打开系统「更大字体」辅助功能，真机比模拟器更容易暴露问题
column-gap 和 column-rule 怎么配才不翻车？
column-gap 默认是 normal（约 1em），视觉上几乎看不见；column-rule 看似像边框，但它只画在列之间，不占额外空间——这点和 border 完全不同。
立即学习“前端免费学习笔记（深入）”；
-
column-gap必须带单位：column-gap: 20无效，得写20px或1.5rem；Chrome 旧版还需-webkit-column-gap -
column-rule的宽度会计入总间隙：column-gap: 20px+column-rule: 2px solid #ccc= 实际列间空隙22px - 别在 Flex/Grid 容器里嵌套多列：父级的
gap对 column 布局完全无效，二者互不感知 - 文字紧贴列边很难读，建议
column-gap至少设1.5rem或24px，比默认值友好得多
column-count: 3，而是它背后那一整套隐式依赖：容器尺寸是否可控、内容结构是否可分、用户设备是否缩放、浏览器是否偷偷降级——改一个值就以为完事，往往只是把问题推到了下一次滚动或换设备的时候。 
