纯 CSS Grid 无法实现真正可用的 Pinterest 堆叠效果，因其布局模型不支持列高动态平衡；唯一原生解是 grid-template-rows: masonry，但需 Chrome 117+/Firefox 119+/Safari 17.4+ 支持，且必须显式定义列、禁用手动定位、使用 aspect-ratio 占位，并配合 JS 补救动态内容与加载抖动。
纯 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-row-end、grid-column等声明，否则退化为普通 Grid - 所有卡片必须是容器的直接子元素；嵌套
display: flex或display: grid子容器会干扰列高测量 - 图片加载异步时，初始渲染常错位——需配合
aspect-ratio占位，或 fallback 到padding-top百分比方案
grid-auto-flow: row + minmax() 只是等高卡片墙
常见错误写法：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))); grid-auto-flow: row;
- Grid 每行高度由该行最高项决定，后续项不会“下沉”到更短列底部
-
grid-auto-rows: min-content对列内高度无影响，它控制的是“行轨道”，不是“列堆叠高度” - 视觉上是整齐的网格，不是错落的瀑布流——本质仍是行列对齐模型
JS 动态分配卡片到最短列才是可靠方案
放弃让 Grid 直接托管所有卡片，改用 Grid 控制列容器 + JS 管理卡片插入逻辑：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid，用grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))自动分列 - 每列是一个
<div class="column">，Grid 只负责宽度和间距，不干预内部内容流 - 每次插入新卡片前，遍历所有
.column的offsetHeight，找到最小值对应列再appendChild - 必须监听图片加载：
img.addEventListener('load', updateColumnHeights)，否则高度塌陷会连锁崩坏 - 用
ResizeObserver替代window.resize，响应字体加载、缩放、侧边栏折叠等内部尺寸变化
别碰 column-fill，它和 Grid 完全无关
column-fill 是多列布局（columns）的属性，在 display: grid 下压根不进计算逻辑：
- 写了
column-fill: balance也毫无反应，子项仍按 DOM 顺序从左到右、从上到下填满网格单元格 - 真正能实现 Pinterest 高度平衡的 CSS 方案只有
columns: 3; break-inside: avoid;，但它属于多列布局模型，不是 Grid - 如果坚持用 Grid，又想免 JS，只能接受静态预设行数 + 手动
grid-row-start，但响应式下彻底失效
最难的不是写出那几行 CSS，而是处理图片未加载、字体回流、响应式断点切换三件事同时发生时的列高抖动——Masonry 的浏览器支持只是起点，不是终点。
