纯CSS实现视觉瀑布流最可靠方案是grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))；auto-fill保留空列占位确保对齐，1fr为弹性上限而非填满，需配合aspect-ratio、object-fit: cover和display: block等图片样式才能稳定呈现。
纯 CSS 实现“视觉上像瀑布流”的图片网格，grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 是当前最可靠、无需 JS 的起点。它不真按高度排序（那是 JS 瀑布流），但能靠内容高度差异+合理列控，做出错落有致、响应自然的效果。
为什么必须用 auto-fill 而不是 auto-fit
auto-fit 会把空的网格轨道收缩掉，把空间让给有内容的列；而瀑布流场景里，最后一行常有不满列的图片，auto-fill 会保留这些列的占位，确保所有图片严格对齐到同一套列线上——否则高度差异大的图会横向偏移、列宽忽大忽小，视觉就散了。
- 典型错误：写了
auto-fit却发现小图被拉宽、大图被压扁，或最后一行图片右端参差不齐 - 真实表现：
auto-fill在容器宽 800px、最小列宽 250px 时，固定生成 3 列（800 ÷ 250 ≈ 3.2 → 向下取整为 3），哪怕第三列只有一张图，它也占位；auto-fit可能只生成 2 列并把宽度拉到 400px - 例外情况：如果你做的是「卡片列表」且每张卡高度接近，
auto-fit更省空间；但图片高度天然差异大，auto-fill更稳
minmax(250px, 1fr) 中的 1fr 不是“填满”，而是弹性上限
1fr 在这里不表示“这张图独占一整行”，而是参与列宽的弹性分配。当容器能放 4 列，4 个 1fr 就均分总宽；若只能放 3 列，就三等分——实际列宽由容器除以列数决定，1fr 只是上限约束，防止某列无限窄。
- 别写
minmax(250px, 100%)：%在grid-template-columns里无效，浏览器会退化成minmax(250px, 0)，列直接崩溃 - 最小值选 250px 是经验阈值：手机横屏（~768px）可塞 3 列，小屏竖屏（375px）剩 1–2 列，文字和图都还清晰；设 320px 就容易在 iPhone 上只剩 1 列
- 如果图片带固定比例（如 16:9），最小宽度建议 ≥ 图片可接受的最小渲染宽度（比如 320px），否则
object-fit: cover会硬裁
图片自身不处理，Grid 布局再准也没用
Grid 只排位置，不管图片怎么缩。常见问题：列宽变了，图还卡着原始尺寸，结果溢出、留白、压扁全来一遍。
立即学习“前端免费学习笔记（深入）”；
- 必须给图片加
width: 100%; height: 100%; object-fit: cover;——max-width: 100%只控宽，高度自由伸缩，失真就是它干的 - 必须给图片父容器（比如
<figure>或直接<div>）设aspect-ratio: 4/3或aspect-ratio: 1/1，否则object-fit没锚点，裁剪位置飘忽 - 必须加
display: block;或vertical-align: top;，否则<img>默认 inline 行为会在底部留 4px 空隙，导致整列被撑高、后续图错位 - 间距统一用
gap: 12px，别给图片加margin——某些 UI 库或重置样式（如 normalize.css）会给<img>默认加margin，叠加gap就双倍留白甚至触发横向滚动条
移动端真要适配，@media 还是得加
单靠 minmax() + auto-fill 能覆盖大部分断点，但小屏（比如 320px 宽）下 250px 最小列宽会导致一行只能塞 1 张图，间隙过大。这时用媒体查询微调最小宽度更可控。
- 推荐组合：
@media (max-width: 480px) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } - 别用
grid-auto-rows: 100px强制行高——图片高度各异，应设grid-auto-rows: minmax(100px, auto)，给内容伸展空间 - 如果项目需兼容 IE11，
auto-fill和minmax()都不支持，得用@supports降级到column-count，但注意它会截断内容、无法控制单图高度
真正难的不是写出那行 repeat(auto-fill, minmax(...))，而是图片自身的 aspect-ratio、object-fit、display 三者缺一不可；漏掉任意一个，视觉就垮一半。
