column-count 渲染顺序不是“左栏填满再右栏”，因为它将容器视作文本段落按文档流切片分列，第1个子元素在左栏顶部、第2个在右栏顶部、第3个又回左栏中部，导致视觉割裂和锚点偏移；必须设column-gap、break-inside: avoid及显式高度，否则无法正确分栏。
column-count 渲染顺序为什么不是“左栏填满再右栏”
因为 column-count 把整个容器当作文本段落处理，DOM 顺序即视觉顺序：第 1 个子元素在左栏顶部，第 2 个就在右栏顶部，第 3 个又回到左栏中部。它不关心卡片语义，只按流式内容切片分列。
这导致两个实际问题：
- 时间倒序列表（如最新商品在前）会视觉割裂——用户想从上往下连贯阅读，结果视线频繁左右跳转
- 卡片内有 sticky 头部、锚点跳转或 scrollIntoView 时，目标位置偏移，iOS Safari 尤其明显
必须设 column-gap（不能靠默认值），所有子项加 break-inside: avoid，容器设显式 height 或 max-height，否则列高无限拉伸，根本不出第二列。
flex-direction: column 分两栏为何会错位
Flex 的 column 模式是「顺序堆叠」，不是「高度优先填充」。你用 index % 2 硬分左右，但图片加载前高度为 0，DOM 渲染后真实高度才撑开，两栏立刻失衡——左栏一堆矮卡片，右栏一张长图顶到底，滚动卡顿肉眼可见。
关键不在 CSS 写法，而在 JS 是否同步真实高度：
- 必须监听每张
<img>的load事件，或用IntersectionObserver触发重算 - 插入新卡片前，得先查左右两列当前
offsetHeight，把新项塞进更短那列 - 避免在卡片内部嵌套多层
display: flex，Flex 容器在 column 布局中分列行为不可控
如何让 column-count 看起来“顺序连贯”
纯 CSS 无法改变 column-count 的分列逻辑，但可以用 JS 补救 DOM 顺序，让视觉流匹配业务逻辑：
- 先按原始顺序渲染全部卡片（保留
data-index属性） - 用 JS 遍历所有卡片，按“列优先索引”重排：比如总高预估为 2000px，每列目标高 ~1000px，则前 N 项归左列，后续归右列
- 更轻量做法：用
:nth-child(odd)/:nth-child(even)做基础样式分栏，再通过order属性动态调整每个卡片的视觉位置
注意：横屏旋转时 column-count 不自动重算，得监听 resize 并手动切换值，或改用 column-width + min-width 组合（列数不可控但响应式更稳）。
Grid auto-flow: column 在移动端能用吗
不能无脑用。grid-auto-flow: column 是实现真瀑布流的语义化写法，但 iOS Safari 在 15.4 之前基本不支持，且与 gap 协同异常——列间隙忽大忽小，甚至整列消失。
若坚持用 Grid，必须接受这些限制：
- 放弃
grid-template-columns，改用grid-auto-columns: minmax(300px, 1fr) - 加
grid-auto-rows: 10px占位（由内容撑开），否则所有项堆在第一行 - 每项需设
grid-row-end: -1或类似 hack 让其自动跨行
实际项目里，column-count + JS 顺序补救仍是兼容性与可控性的平衡点：它不依赖 JS 渲染布局，可打印，语义清晰，只是你要亲手管好那些容易被忽略的细节——比如 rootMargin 负值在 iOS 上不稳定，或者图片 vertical-align 缺失导致底部空白计入高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
