column-width 可实现移动端自动单列，因 column-count 强制分列导致小屏文字挤压；columns 简写更稳，需写为 columns: 3 280px（先列数后宽度），column-span: all 在小屏易引发隐式横向滚动。
直接用 column-width 替代 column-count，就能让多列布局在移动端自动退为单列；写死 column-count: 3 是导致小屏文字挤成一条缝的根本原因。
为什么 column-count 在手机上会“挤”而不是“降”
浏览器对 column-count 的处理是强制分列——哪怕容器只有 320px 宽，column-count: 3 也会硬切成三列，每列只剩约 100px，结果文字频繁换行、按钮被裁、图片变形。这不是 bug，是规范定义的行为。
-
column-count是“我要几列”，不关心内容可读性 -
column-width是“每列至少多宽”，浏览器据此反推能放几列 - 两者同时存在时，
column-count优先级更高，会覆盖column-width的自适应逻辑
用 columns 简写属性最稳，顺序不能错
推荐直接用 columns 简写，它把列数上限和最小宽度合二为一，语义清晰且不易冲突。
- 正确写法：
columns: 3 280px（先列数后宽度），等价于“最多 3 列，每列至少 280px” - 错误写法：
columns: 280px 3（顺序颠倒），浏览器解析失败，退为默认单列但无提示 - 如果只要自适应、不限列数，就写
columns: 280px，即只设column-width: 280px -
column-gap必须单独声明，它不参与columns简写
column-span: all 在小屏下可能偷偷撑宽容器
标题类元素设了 column-span: all 后，会横跨当前所有列。但若列数没随屏幕缩小而减少（比如仍为 3 列），它的实际宽度 = 容器宽 + 2 × column-gap，极易触发隐式横向滚动——DevTools 里看不到滚动条，但手指一滑就卡顿。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：在媒体查询中为小屏重置
column-span: none - 或更彻底：小屏下直接关掉多列，用
@media (max-width: 600px) { columns: auto; } - 别依赖
columns: 1——这个值非法，浏览器会忽略
真正麻烦的从来不是“怎么切单列”，而是切完之后：首屏是否被长标题顶出可视区、段落间距是否突然变大、有没有因 column-span 或未重置的 column-gap 意外撑宽容器——这些都得手动调，没法靠一行 CSS 自动修复。
