grid-template-rows: masonry 是目前唯一原生支持 pinterest 式异步瀑布流的 css 方案，需显式定义列（如 repeat(3, 1fr)）、禁用手动定位，配合 aspect-ratio 占位与 js 补救（如 scrollintoview 或 transform 强制重绘）应对图片加载、字体回流及响应式切换导致的列高抖动。
grid-template-rows: masonry 是目前唯一能原生支持 Pinterest 式异步瀑布流的 CSS 方案，但必须配合显式列定义和现代浏览器（Chrome 117+ / Firefox 119+ / Safari 17.4+），旧版 Grid 完全无法做到。
为什么 grid-auto-flow: row + minmax() 不是瀑布流
很多人误以为写成 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))); grid-auto-flow: row; 就能实现瀑布流，结果只是等高卡片墙。原因很直接：Grid 每行高度由该行最高项决定，后续项不会“下沉”到更短的列底部；grid-auto-rows: min-content 或 fit-content 也无效，因为 Grid 轨道不支持列级独立高度伸缩。
grid-template-rows: masonry 的硬性前提
这个新特性不是“开箱即用”，它有几条不可绕过的限制：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须显式定义列数或列宽，例如
grid-template-columns: repeat(3, 1fr)或grid-template-columns: 300px 300px 300px；auto-fill/auto-fit会失效 - 不能使用
grid-row、grid-row-start等手动定位属性，否则 Masonry 行为被禁用 - 图片加载异步时，初始渲染可能错位——需配合
img { display: block; height: auto; }和aspect-ratio占位，或用loading="lazy"+ResizeObserver触发重排 - Firefox 对
aspect-ratio支持稍弱，建议 fallback 到 padding-top 百分比占位
异步内容插入时的 JS 补救点
即使用了 Masonry，动态追加卡片仍可能出问题，因为浏览器不会自动重触发 Masonry 布局计算：
- 新增节点后，调用
element.scrollIntoView({ block: 'nearest' })或简单修改element.style.transform = 'scale(1)'可强制重绘 - 监听图片加载完成：
img.addEventListener('load', () => { container.style.display = 'grid'; setTimeout(() => { container.style.display = ''; }, 0); })—— 这种 hack 在 Safari 中最有效 - 避免在 Masonry 容器内嵌套 Flex/Grid 子容器，会干扰列高测量；所有卡片应为直接子元素
- 服务端返回数据时，尽量附带预估高度（如基于宽高比），用于
minmax(0, <em>estimated-height</em>px)占位，减少重排幅度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
