columns 或 column-count/column-width 实现响应式分栏最轻量语义最准，但仅适用于连续文本流；column-width 优先于 column-count，后者仅为上限提示。
直接说结论：用 columns 或 column-count/column-width 实现响应式分栏文本最轻量、语义最准，但只适用于连续文本流；它不控制子元素位置，也不适配卡片类结构。
column-count 和 column-width 一起用时谁说了算？
浏览器优先尊重 column-width，再根据容器宽度“尽可能多地塞进符合该宽度的栏”。column-count 只是上限提示，不是硬约束。
- 写
column-count: 4; column-width: 180px;，但容器只有 500px 宽 → 实际只出 2 栏（2 × 180 = 360 ≤ 500，3 × 180 = 540 > 500） - 容器宽 800px → 出 4 栏（4 × 180 = 720 ≤ 800），剩 80px 均分到
column-gap - 若只设
column-count: 4，没设column-width，则栏宽完全由容器均分，可能窄得文字频繁换行
响应式断点里改栏数，为什么加了媒体查询还是没变？
常见原因是父容器没设明确宽度，或被 flex/grid 等布局“劫持”了尺寸计算逻辑 —— columns 依赖块级流式上下文。
- 确保目标容器是
display: block（默认即可），且没有display: flex或display: grid - 检查是否父级用了
width: fit-content或max-width: none，这会让column-width失效 - 媒体查询中不要只改
column-count，建议同步设column-width，例如：@media (max-width: 768px) { .article { column-count: 1; column-width: auto; } }
break-inside: avoid 不生效？这几个地方容易漏
这个声明对 <p></p>、<h3></h3> 这类非替换块级元素有效，但对 <img>、<iframe></iframe> 或设置了 float 的元素无效。
- 必须加在要保护的子元素上，不是加在多栏容器上：
.article p { break-inside: avoid; } - 旧版 Safari 需补
-webkit-column-break-inside: avoid;；IE/Edge 旧版本要用page-break-inside: avoid; - 如果该元素本身有
margin-bottom: 0且下一段紧贴，浏览器可能仍会拆分 —— 加个margin-bottom: 1em提供断裂缓冲空间
column-span: all 的标题为啥跑不出一栏？
三个硬性前提缺一不可：父容器启用了多列、标题是块级元素、没用 float 或 position: absolute。
- 确认父容器有
columns: 3或等效声明，仅靠column-count不够（需触发多列上下文） - 给标题加
display: block（部分 Chrome 版本对<h2></h2>默认 inline-block 表现异常） - 避免任何
float: left、position: relative（哪怕只是想微调位置）—— 这些会让column-span直接失效
真正难搞的不是写几行 CSS，而是判断「这段内容到底该用 columns、flex 还是 grid」：文本流就用 columns，结构化卡片就别硬套，否则后期加 hover 动画、高度一致化、跨设备对齐全得推翻重来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
