grid-template-rows: masonry 不能直接用，因其为实验性语法，仅 Firefox 部分支持，Chrome/Safari 不识别，会导致布局回退；应改用 repeat(auto-fill, minmax(250px, 1fr)) 配合 aspect-ratio 和 object-fit 实现稳定瀑布流。
为什么 grid-template-rows: masonry 不能直接用
因为 grid-template-rows: masonry 是实验性语法，目前仅 Firefox 部分版本支持，Chrome 和 Safari 默认禁用或完全不识别。直接写上会导致布局回退为普通网格，图片堆成单列或错位。别被文档里“未来标准”的描述误导——生产环境必须按当前兼容性来设计。
用 repeat(auto-fill, minmax()) 控制列数更稳
核心是让列数随容器宽度自适应，同时保证每列有最小宽度锚点，避免小图被拉宽变形。关键不是“填满”，而是“占位对齐”：
-
auto-fill比auto-fit更适合瀑布流：它保留空列轨道，确保所有图片严格对齐同一套列线，最后一行不会右端参差 -
minmax(250px, 1fr)中的1fr是弹性上限，不是“独占整行”。实际列宽 = 容器宽 ÷ 列数，1fr只防止列窄于内容可读范围 - 设
250px是经验值：在 iPhone 竖屏（375px）下能塞进 1–2 列，图片文字仍清晰；设320px就容易只剩一列，失去瀑布感
图片自身必须配合 object-fit 和 aspect-ratio
Grid 只排位置，不管图片怎么缩。没加约束的 <img> 会按原始尺寸溢出、留白或压扁，再准的 Grid 也白搭：
- 给图片加
width: 100%; height: 100%; object-fit: cover;——max-width: 100%不够，高度失控就失真 - 给图片父容器（如
<figure>或包裹<div>）设aspect-ratio: 4/3或1/1，否则object-fit缺少裁剪锚点，上下左右飘忽 - 如果后端返回图比例不统一，
aspect-ratio必须写死，不能依赖图片原始宽高比
gap + grid-auto-flow: dense 填缝隙但要小心顺序
gap: 16px 能统一行列间距，视觉干净；grid-auto-flow: dense 让短图自动填补前面长图留下的空隙，提升紧凑度。但它有个硬伤：
立即学习“前端免费学习笔记（深入）”；
- DOM 顺序和视觉顺序可能不一致，影响屏幕阅读器和键盘 Tab 导航
- 如果瀑布流内容含操作按钮（如“收藏”“下载”），
dense可能让按钮跳到意外位置，用户误点 - 真正需要语义顺序严格的场景（比如商品列表带价格排序），宁可留点白，也不开
dense
最易被忽略的是：所有这些 CSS 都只解决“视觉瀑布流”，不是 Masonry 那种按高度动态分配列的算法。如果业务要求新图永远插到最短列底部（比如实时加载+无限滚动），纯 CSS 无解，必须配 JS 计算高度并设 grid-row-end: span X。
