column-count 是移动端瀑布流最稳起点，但需显式设置容器 height 或 max-height（如 100vh）并加 break-inside: avoid 防截断，响应式用媒体查询切列数，顺序错乱需 JS 重排。
column-count 是移动端优先瀑布流最稳的起点，但直接写 column-count: 2 很可能白忙活——它只在容器有明确高度约束时才真正分栏，否则退化为单列。
为什么 column-count 在移动端常“不生效”
这不是 bug，是规范行为：column-count 要求容器有可计算的块级高度（height 或 max-height），否则浏览器认为“一列就能撑满”，干脆不分栏。尤其在 Vue/React 动态渲染场景下，DOM 挂载后容器高度仍为 auto，column-count 就被忽略。
- 必须显式设置容器
height或max-height（哪怕只是max-height: 100vh） - 若用
flex: 1或100%嵌套在父容器中，父容器也得有确定高度，否则链式失效 - iOS Safari 对
height: 100%解析更保守，建议优先用vh单位或max-height
break-inside: avoid 必须加，且要加对位置
卡片被从中间截断（上半截在左列、下半截跳到右列）是 column-count 最典型崩溃现象，根因就是子项没加 break-inside: avoid。
- 样式必须作用在每个卡片最外层元素上，不是组件 wrapper，也不是内部
<div> - 兼容写法需补全前缀：
break-inside: avoid+-webkit-column-break-inside: avoid+-moz-break-inside: avoid - 别用
avoid-column—— Safari 13 及更早版本不识别，直接失效 - 如果卡片含图片，
break-inside只能防初始截断；图片加载后撑高仍可能触发重排，此时需配合column-fill: balance
响应式列数切换别靠 column-width
column-width: 250px 看似灵活，但在移动端实际表现极不可控：横屏/竖屏切换、字体加载、缩放都会导致列数突变，iOS Safari 下列高还容易严重不均。
- 用媒体查询切
column-count更可靠：@media (max-width: 768px) { column-count: 2; } - 列数变更时，浏览器会自动重平衡内容，无需 JS 干预
- 避免同时设
column-count和column-width，后者会覆盖前者（除非用columns: 2 250px这种简写，但语义模糊） - 微信小程序 iOS 端偶发
column-count失效，可加transform: translateZ(0)强制硬件加速稳定渲染
顺序错乱问题没法纯 CSS 修复
column-count 的 DOM 顺序即视觉顺序：第 1 个卡片在左列顶部，第 2 个就在右列顶部，第 3 个又回左列中部。这意味着时间倒序数据（最新在前）会呈现“左右交替跳跃”的阅读路径。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 无法改变这一逻辑，
order属性在多列中无效 - 若业务强依赖“左列全为新内容、右列为次新”，必须用 JS 重排 DOM：先按原始顺序渲染，再按列高预估把节点移动到对应列容器中
- 懒加载新卡片时，不能直接
appendChild到根容器，否则破坏列平衡；得先查左右列当前offsetHeight，插入更短那列的末尾 - 滚动锚点（
scrollIntoView）在多列中偏移严重，iOS Safari 尤其明显，需用getBoundingClientRect()手动校正位置
break-inside 的作用位置——这两点没做对，后面所有样式都白搭。而顺序错乱问题，往往上线后用户反馈“看着乱”才暴露，但此时已不是加几行 CSS 能解决的。 
