纯 CSS Grid 无法实现真正瀑布流（Masonry），目前仅 Chrome 116+ 支持 grid-template-rows: masonry 且限制严苛，所有“纯 CSS 瀑布流”方案均为视觉模拟，需配合明确约束条件才能稳定生效。
纯 CSS Grid 无法实现真正瀑布流（Masonry），grid-template-rows: masonry 目前仅 Chrome 116+ 支持且限制严苛，所有“纯 CSS 瀑布流”方案都是视觉模拟，必须配合明确约束条件才能稳定生效。
为什么 grid-auto-rows + grid-row-end: span 容易翻车
这个组合看似能跨行堆叠，实际是把布局责任推给开发者：你得自己算好每项该占几行。但真实项目里高度不可控——图片懒加载未完成、字体尚未就绪、文字换行导致高度突变，都会让预设的 span 值失效。
-
grid-auto-rows: 10px这类固定值只适合 SSR 场景，且必须等所有资源加载完再用 JS 重新计算span值 -
grid-auto-flow: dense对跨行项基本无效，上方留白不会被后续项自动填补 - 列之间完全不联动，某列底部空出一大块，其他列也不会向下延伸填充
- resize 或字体加载后触发二次 layout，容易造成闪动或重叠
真正可用的纯 CSS “视觉瀑布流”写法：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
这不是 Masonry，但它是目前唯一能在 Safari/Firefox/Chrome 全平台稳定产出错落感的 Grid 写法，关键在参数选择和配套样式。
- 必须用
auto-fill，不是auto-fit：前者保留空列占位，确保所有图片严格对齐同一套列线；后者会收缩空轨道，导致最后一行右端参差不齐 -
minmax(250px, 1fr)中的1fr是弹性上限，不是“填满”，实际列宽 = 容器宽度 ÷ 列数；写成%会退化为minmax(250px, 0)，列直接崩溃 - 图片父容器必须加
aspect-ratio（如4/3），不能加在<img>上；否则object-fit: cover没锚点，裁剪位置飘忽 -
<img>必须设width: 100%; height: 100%; object-fit: cover; display: block;，max-width: 100%只控宽，高度自由伸缩必失真
响应式断点与防抖陷阱
列数变化不等于容器宽度变化，仅靠 window.resize 监听会漏掉重排——比如横竖屏切换时宽度没变，但 grid-template-columns 已重新计算。
立即学习“前端免费学习笔记（深入）”；
- 必须用
ResizeObserver监听容器尺寸，而不是window - 媒体查询中改
minmax()最小值即可，例如@media (max-width: 480px) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } - 别混用
column-count和 Grid：它们底层机制冲突，Safari 对break-inside: avoid支持不稳定，图片可能被截断 -
gap统一设，别只用row-gap—— 某些旧版 Safari 解析异常
真正动态瀑布流仍需 JS 驱动：按列高分配元素、监听图片加载、防抖重排。CSS Grid 在这里只是容器骨架，不是布局引擎。最容易被忽略的是 aspect-ratio 加在哪一层、display: block 是否落在 <img> 上，以及 auto-fill 和 auto-fit 的语义差异——写错一个，整页瀑布就散了。
