纯 css grid 无法实现真正可用的 pinterest 流式布局，因模型不支持列高动态平衡；原生解 grid-template-rows: masonry 需显式定义列、禁用定位声明、直系子元素、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对列内高度无影响，它控制的是“行轨道”，不是“列堆叠高度” - 视觉上仍是整齐的网格，本质仍是行列对齐模型，不是错落的瀑布流
-
grid-auto-flow: dense只解决空洞填充，不解决高度差异；在真实业务中（含异步图片/文字）基本无效
JS 动态分配才是当前最可靠方案
放弃让 Grid 直接托管所有卡片，改用 Grid 控制列容器 + JS 管理卡片插入逻辑：
- Grid 只负责宽度和间距，不干预内部内容流；例如设
grid-template-columns: repeat(3, 1fr)，禁用grid-auto-flow - 每次插入新卡片前，遍历所有
.column的offsetHeight，找到最小值对应列再appendChild - 必须监听图片加载：
img.addEventListener('load', updateColumnHeights)，否则高度塌陷会连锁崩坏 - 用
ResizeObserver替代window.resize，响应字体加载、缩放、侧边栏折叠等内部尺寸变化
真正难的不是写对那两行 CSS，而是处理图片未加载、字体回流、响应式断点切换这三件事——它们会让任何静态 span 或预设轨道瞬间失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
