最简瀑布流应使用grid-template-rows: masonry配合display: grid和grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，并用aspect-ratio为图片占位防闪跳；旧浏览器可用column-count降级。
用 grid-template-rows: masonry 实现最简瀑布流
现代浏览器（Chrome 105+、Firefox 100+、Safari 16.4+）原生支持 grid-template-rows: masonry，这是目前对新手最友好的方案：不用 JS、不写循环、不监听图片加载、不会因高度变化错位。
关键不是堆属性，而是这三行必须同时存在：
display: gridgrid-template-columns: repeat(auto-fill, minmax(280px, 1fr))grid-template-rows: masonry
常见错误是漏掉 grid-template-columns —— 没它，masonry 不生效；或误用 grid-auto-flow: column，那只是按源顺序填列，不是真正瀑布流。
子项别设 grid-row 或 rowspan，否则破坏自动分列逻辑。容器也别加 height 或 max-height，Masonry 需要自由伸展空间。
图片加载闪跳？用 aspect-ratio 提前占位
瀑布流崩得最多的地方，就是图片还没加载完时高度为 0，Masonry 按 0 布局，图一加载完立刻撑开，页面跳动甚至错列。
立即学习“前端免费学习笔记（深入）”；
解决方法不是等 JS 加载完再渲染，而是让浏览器“提前知道”宽高比：
- 直接给
<img>加style="aspect-ratio: 4/3; object-fit: cover;" - 或包裹一层
<div style="aspect-ratio: 4/3"><img></div> - 旧浏览器（如 Safari ≤ 15.3）会忽略
aspect-ratio，但不报错——此时可加min-height: 200px做弱降级
别给整个卡片容器设 aspect-ratio，商品卡常含多行文字，比例不固定，反而导致布局异常。
老浏览器兼容 fallback：用 column-count 降级
如果项目必须支持 IE11 或旧版 Safari，masonry 会直接失效，退化为空白或单列。这时不要硬套 JS 库，改用 column-count 安全降级：
.waterfall { column-count: 3; column-gap: 16px; }.item { break-inside: avoid; margin-bottom: 16px; }- 必须配合
aspect-ratio或伪元素占位，否则图片加载慢会导致内容提前“掉”进下一列，肉眼可见闪跳 -
column-count对卡片内文字行数敏感，避免在.item里用flex或grid嵌套多层布局，容易触发break-inside失效
注意：column-gap 是唯一合法列间距方式，gap 在多列模式下无效；也别指望用 margin 控制卡片间距，它会被算进列宽，可能少出一列。
为什么别碰 float 和 position: absolute
新手常搜到用 float: left 或 position: absolute + JS 计算位置的“瀑布流教程”，这些方案在今天已完全过时：
-
float语义错误（本用于图文环绕）、清除浮动易出错、响应式需重写整套逻辑 -
position: absolute脱离文档流，无法自动适应内容高度变化，每张图加载后都要手动重排，滚动性能差 - 两者都难做无障碍支持（screen reader 读序混乱），也难配合现代 CSS 工具链（比如 Tailwind 的
grid-cols-类）
真正需要动态精确对齐（比如电商首页要求所有列底部严格齐平），才考虑引入 masonry-layout 库——但那是进阶需求，不是入门起点。
最易被忽略的一点：瀑布流效果是否成立，不取决于你写了多少行 CSS，而取决于图片是否在渲染前就预留了空间。没 aspect-ratio 或固定尺寸，再好的 Masonry 规则也会在用户眼前跳一次。
