column-count + break-inside 是最轻量的多列自动排序方案，纯css实现填满短列效果，但非真瀑布流；需扁平结构、避免卡片截断、禁用height、慎用grid-auto-flow:dense，真正按列高排序须依赖js。
column-count + break-inside 是最轻量的多列自动排序方案
纯 CSS 实现“多列自动排序”不等于真瀑布流，但对大多数卡片类内容（如图片列表、文章摘要）已足够——浏览器会把 .item 当作文本流切片填入各列，视觉上就是“填满短列”的效果。
- 必须用扁平结构：
<div class="masonry"> <div class="item">...</div> <div class="item">...</div> </div>，.item必须是.masonry的直接子元素 -
break-inside: avoid不能漏写，否则卡片可能被截断到两列；Firefox 要补page-break-inside: avoid，Safari 13 及更早需加-webkit-column-break-inside: avoid - 容器不能设
height，但建议设max-height（比如max-height: 100vh），否则在无约束下会退化为单列 -
column-gap只能用px或rem，百分比值在部分浏览器中解析异常
grid-auto-flow: dense 不是自动排序，只是错位填充
很多人误以为 grid-auto-flow: dense 能实现列高感知的自动排序，其实它只做一件事：在 DOM 顺序填完一行后，回头把矮项塞进前面长项留下的空隙。它不判断哪列最短，也不重排已有项。
- 必须配合
grid-template-columns: repeat(3, 1fr)和合理的grid-auto-rows（推荐200px，不是最小高度，而是 Grid 引擎计算跨行跨度的基准） - 别用
margin控制间距，gap才是 Grid 内部间距的唯一可靠方式 - 媒体查询里改列数时，记得同步调整
grid-auto-rows和gap，否则小屏下留白或塌缩 - 动态插入新
.item后，Grid 会触发整网格重计算，长列表易掉帧；频繁 resize 也容易抖动
真正按列高排序只能靠 JavaScript
如果你需要严格按“当前最短列”插入新项（比如无限滚动加载、卡片高度差异极大、SEO 要求 DOM 顺序 = 视觉顺序），CSS 方案都会失效。此时必须用 JS 计算列高并定位。
- 不要手写循环找最短列——用
masonry-layout或vanilla-masonry这类轻量库，它们内部已优化列高缓存和增量布局 - 每个
.item必须有明确高度（不能依赖height: auto且图片未加载完），否则 JS 无法准确计算 - 容器必须设
position: relative，否则绝对定位的.item会脱离上下文 - 避免在
scroll事件里直接调用layout()，改用IntersectionObserver或节流函数控制触发频率
Chrome/Safari 新支持的 grid-template-rows: masonry 仍需谨慎
Chrome 116+ 和 Safari 17.4+ 支持真正的 CSS 瀑布流：grid-template-rows: masonry，但它不是开箱即用的“魔法开关”。
- 必须用
@supports (grid-template-rows: masonry)包裹，否则老浏览器会直接忽略整个规则 - 它只作用于行方向，列数仍由
grid-template-columns控制，且不支持grid-auto-flow: column - 目前不支持响应式列数切换（比如从 3 列切到 2 列），切换时需手动重置容器
- 动态添加项后，浏览器会自动重排，但首次渲染仍可能有闪动，尤其配合 CSS 自定义属性动画时
break-inside 兼容性上——不是代码写得不对，是 .item 被套了两层 div，或者忘了给 img 外面包一层块级容器。真要追求语义与视觉一致，JS 方案反而更可控。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
