column-count在移动端常显示单列，根本原因是容器未设置height或max-height；必须显式设定如max-height: 70vh，否则浏览器退化为单列渲染，且min-height无效、flex父容器无高度也会导致失效。
column-count 能快速搭出视觉接近瀑布流的效果，但不是真瀑布流——它按文档流顺序切片分栏，DOM 顺序和视觉顺序不一致，交互、懒加载、高度差异大时容易翻车。真要稳，得加约束、补缺陷，或换方案。
为什么 column-count 在移动端常只显示一列？
根本原因是容器没设 height 或 max-height。浏览器看到“空间无限”，直接退化为单列渲染，column-count: 2 形同虚设。
- 必须显式写
max-height: 70vh或具体像素值（如height: 600px），min-height不触发列布局 - 若父容器是
display: flex且没设高度，同样失效 - iOS Safari 对
column-fill: balance支持极差，别指望它拉平列高
图片被截断、卡片劈成两半怎么办？
这是 column-count 的默认行为：它把子元素当文本段落切分，不识别语义块。没加防护就必然截断。
- 每个卡片元素（如
.card）必须设break-inside: avoid - 旧版 iOS 需补前缀：
-webkit-column-break-inside: avoid和page-break-inside: avoid -
img标签加vertical-align: top，否则底部空白计入高度，加剧错位 - 卡片自身不能是
position: absolute或float，否则脱离文档流，break-inside失效
滚动懒加载为啥总失效？
传统基于 window.scrollY 的方案在 column-count 容器里完全不可用：滚动的是容器，不是文档主体；且 DOM 顺序 ≠ 视觉顺序，scrollIntoView 和锚点跳转都会偏移。
- 必须用
IntersectionObserver，观察目标是每个卡片元素本身，不是容器 - 避免设过大的
rootMargin（如"-200px"），iOS Safari 对负值处理不稳定 - 建议配
threshold: 0.1，防止刚进视口就触发，提升首屏节奏感 - 图片异步加载完成前高度为 0，会导致列高预估错误——必须用
aspect-ratio或padding-top占位保初始宽高比
要不要用 grid-auto-flow: column 替代？
它能实现列优先的真瀑布流，但 Safari 兼容性是硬伤：iOS 15.4 之前基本不可用，且与 gap 协同异常，列内项易堆叠在第一行。
- 更稳妥的 Grid 写法是：
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)))+grid-auto-flow: row，靠内容高度自然形成“视觉瀑布” - 若需列高对齐（如电商商品卡），必须用
grid-auto-flow: column，但得用@supports包裹，并给 Safari 回退到column-count - 所有图片必须设
width: 100%; display: block;，否则vertical-align: baseline留下的底部间隙会让整列错位
column-count 不自动重算，IntersectionObserver 在低端 Android 上可能静默失败，图片宽高比混排时 aspect-ratio 并非全平台支持——这些细节漏掉一个，上线就是生产事故。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
