纯 css grid 无法实现真正瀑布流，因 grid-template-rows: masonry 兼容性差、限制多，生产环境需用 grid-auto-flow: column 配合 js 动态分配最稳妥。
纯 CSS Grid 无法实现真正的瀑布流——grid-template-rows: masonry 虽已进入 Chrome 116+ 和 Firefox Nightly，但 Safari 仍不支持，且生效条件苛刻；生产环境必须按当前兼容性设计，不能依赖“未来语法”。
为什么 grid-template-rows: masonry 在生产中基本不可用
它不是“开了就灵”的开关，而是受多重限制的实验性特性：
- 必须显式写死
grid-template-columns（auto-fill或auto-fit直接失效） - 容器需有明确的
height或max-height，否则退化为普通网格 - 子项不能设
grid-row-span、grid-col-span，也不能含position: absolute或float -
@supports (grid-template-rows: masonry)在 Safari/Firefox 中永远返回false，因为它们根本不解析该声明，无法做 JS 检测降级
换句话说：你写了它，Chrome 可能渲染正确；其他浏览器静默忽略，布局变成单列堆叠——这不是“不完美”，是直接崩坏。
grid-auto-flow: column + JS 动态分配是最稳路径
Grid 负责列宽、间距和响应式断点，JS 只管把每个图片塞进当前最短列。逻辑清晰、兼容所有现代浏览器、能应对图片加载延迟和字体重排。
- 父容器设
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，用auto-fill保留空列占位，避免小屏初加载只出一列 - 必须用
grid-auto-flow: column，让浏览器按列顺序排列（而非默认的按行），这是 JS 重排的前提 - JS 不用
order属性（易被 CSS 优先级覆盖），直接用appendChild移动 DOM 节点，确保视觉顺序与可访问性顺序一致 - 每次插入后，用
item.getBoundingClientRect().height更新列高，别用offsetHeight（含边框/滚动条误差）
图片自身必须加 aspect-ratio 和 object-fit
Grid 只排位置，不管图片怎么缩。没约束的 <img> 会溢出、留白或压扁，再准的 Grid 也白搭：
-
max-width: 100%不够——高度失控就失真 - 给图片父容器（如
<figure></figure>）设aspect-ratio: 4/3或1/1，否则object-fit缺少裁剪锚点，上下左右飘忽 - 后端返回图比例不统一？必须写死，不能依赖原始宽高比
- 加
img { display: block; width: 100%; height: auto; }，否则vertical-align: baseline会在底部多出 4px 空白，干扰列高计算
响应式重排最容易漏掉的三件事
窗口缩放、图片加载、字体加载都会让列高计算失效，只监听 window.resize 远远不够：
- 必须用
ResizeObserver监听容器宽度变化，而不是整个window - 重排逻辑要防抖，比如
setTimeout(() => { redistributeItems() }, 100)，等浏览器完成 layout 再执行，避免反复触发回流 - 懒加载图片
onload后必须再触发一次重排，否则 JS 初始计算时高度为 0，后续撑开列高却没更新其他列状态
真正麻烦的从来不是第一版代码，而是图片异步、字体异步、用户缩放、SSR 首屏直出、键盘导航这些叠加起来的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
