纯 css grid 无法实现瀑布流，因 grid-template-rows 静态划分轨道致各列等高；可行方案是 grid-auto-flow: column + js 动态分配元素至最短列，并需处理响应式重排、图片加载延迟等问题。
grid-template-rows 无法直接实现瀑布流
纯 CSS Grid 的 grid-template-rows 是静态定义的，哪怕用 minmax() 或 auto-fit，它也只是按行划分固定轨道，所有列高度同步拉伸——这和瀑布流（各列独立堆叠、高度不一致）本质冲突。强行用 grid-template-rows: repeat(100, 1fr) 不仅性能差，还会导致内容错位、滚动异常。
真正可行的路径是：用 Grid 做“容器骨架”（列数固定），靠 JS 动态把每个子项插入到当前最短列中。
用 grid-auto-flow: column + JS 手动分配元素
这是目前最稳定、兼容性好、且能复用 Grid 布局能力的做法。Grid 负责列宽、间距、响应式断点；JS 只管“往哪一列塞”。
-
display: grid容器设为grid-auto-flow: column，列数由grid-template-columns控制（如repeat(auto-fill, minmax(300px, 1fr)))） - 初始时所有子项 DOM 顺序排列，JS 遍历它们，按列高动态重排
order值（或直接用appendChild移动节点） - 每列用一个数组记录当前高度，插入前找最小值索引，插入后更新该列高度（用
getBoundingClientRect().height更准，避免渲染抖动）
示例关键逻辑：
const columns = Array.from({ length: colCount }, () => 0);
items.forEach(item => {
const minHeight = Math.min(...columns);
const minIndex = columns.indexOf(minHeight);
item.style.order = minIndex; // 或 container.appendChild(item)
columns[minIndex] += item.getBoundingClientRect().height;
});
注意 grid-row-start 的陷阱
有人尝试用 grid-row-start 配合 JS 计算行号来“模拟”瀑布，但问题很多：
- 行高必须预设（如
grid-template-rows: repeat(200, 10px)），无法适配字体、图片等不确定高度内容 - 当某列内容超长，
grid-row-end算错会导致重叠或空白断裂 - resize 或字体加载完成后再计算，容易触发两次 layout，造成闪动
- SSR 场景下 JS 还没执行，首屏直接显示错乱布局
除非你完全控制内容高度（比如全是等高卡片），否则别碰这个方案。
响应式重排必须监听 resize + 使用 ResizeObserver
窗口缩放会改变列数，此时旧的 order 值或节点顺序立刻失效。不能只靠 window.addEventListener('resize')，要配合 ResizeObserver 监听容器宽度变化，并在尺寸稳定后（可用 setTimeout 防抖）重新分发元素。
更关键的是：重排前要清空所有 order 值（设为 0）或还原 DOM 顺序，否则新旧列高数组会错位。简单做法是先 container.innerHTML = '' 再全部 append，比维护状态更可靠。
复杂点在于图片加载延迟——img 加载完成前高度为 0，JS 会误判列高。解决方案只有两个：img 加 height 属性（配合 aspect-ratio），或等 load 事件后再运行一次分发逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
