纯 css grid 无法实现真正可用的 pinterest 瀑布流，因其布局模型未设计列高动态平衡；唯一原生解是 grid-template-rows: masonry，但需满足 chrome 117+/firefox 119+/safari 17.4+、显式定义 grid-template-columns、禁用手动定位、卡片为直接子元素、用 aspect-ratio 防图片塌陷等硬性前提。
纯 CSS Grid 无法实现真正可用的 Pinterest 瀑布流——这不是写法问题，而是布局模型根本没设计支持列高动态平衡。
grid-template-rows: masonry 是唯一原生解，但有硬性前提
Chrome 117+ / Firefox 119+ / Safari 17.4+ 已支持 grid-template-rows: masonry，但它不是“加一行就生效”的特性：
-
grid-template-columns必须显式定义，例如repeat(3, 1fr)或300px 300px 300px；auto-fill和auto-fit会直接禁用 Masonry 行为 - 完全禁用任何手动定位：不能出现
grid-row-start、grid-column、grid-area等声明，否则退化为普通 Grid - 所有卡片必须是容器的直接子元素；嵌套
display: flex或display: grid子容器会干扰列高测量 - 图片未加载时高度塌陷会导致初始错位，必须用
aspect-ratio占位，或 fallback 到padding-top百分比
为什么 grid-auto-flow: row + minmax() 只是等高卡片墙
很多人误以为这样就能实现瀑布流：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
grid-auto-flow: row;
grid-auto-rows: min-content;
}
结果只是每行等高、内容被拉伸或截断。原因很直接：
- Grid 每行高度由该行最高项决定，后续项不会“下沉”到更短列底部
-
grid-auto-rows: min-content控制的是轨道高度，不是列内堆叠逻辑 -
grid-auto-flow: column虽按列填充，但要求grid-auto-rows固定（如300px），卡片高度不一时会出现大片空白或重叠
动态插入新卡片后为何仍错位？JS 补救点在哪
即使启用了 grid-template-rows: masonry，浏览器也不会自动重触发列高重算。常见现象包括新卡片堆在顶部、列高不均衡、滚动时抖动：
- 新增节点后，立刻调用
element.scrollIntoView({ block: 'nearest' })，可强制重绘 - 或简单修改样式：
element.style.transform = 'scale(1)'，比重排开销小 - 监听图片加载：
img.addEventListener('load', () => { container.style.display = 'grid'; setTimeout(() => { container.style.display = ''; }, 0); })—— 这种 hack 在 Safari 中最有效 - 服务端返回数据时，尽量附带预估高度（如基于宽高比），用于
minmax(0, estimated-heightpx)占位，减少重排幅度
真正难的不是写对那两行 CSS，而是处理图片未加载、字体回流、响应式断点切换这三件事同时发生时的列高抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
