auto-fit比auto-fill更适合多数图片画廊，因其合并空列使布局更紧凑；需配合容器约束、aspect-ratio包裹结构及clamp()控制gap，否则易塌陷、错位或变形。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能跑通绝大多数场景，但必须配合容器约束、图片包裹结构和 gap 控制——否则画廊会塌、错位、拉伸或留白失控。
为什么 auto-fit 比 auto-fill 更适合多数图片画廊
auto-fit 会合并空列，让有图的列均分剩余空间，视觉更紧凑；auto-fill 则保留空轨道，容易在最后一行右侧留白，尤其当图片数量不是列数整数倍时。但要注意：auto-fit 在小屏下可能把窄图强行拉宽变形，所以必须靠外层容器控制比例，不能只依赖 grid 自动分配。
- 用
auto-fit：适合内容密度优先、不强调严格对齐的画廊（如社交动态流、新闻缩略图） - 用
auto-fill：适合需要网格节奏稳定的场景（如作品集、商品列表），但得接受末尾空列 - 别混用
justify-content: center+auto-fill，空列会导致整体居中偏移
minmax() 里 1fr 是合法的，但理解错了就会失效
minmax(250px, 1fr) 中的 1fr 不是“填满容器”，而是“单列最大可占均分后的一份”。浏览器实际列宽 = 容器总宽 ÷ 列数。所以它本质是上限保护，防止列宽被压缩到不可读（比如小于 200px）。但如果你设 minmax(300px, 1fr)，在 iPhone SE（375px 屏宽）上减去 gap 和 padding 后根本塞不下两列，结果只剩一列——这不是 1fr 的问题，而是最小值设高了。
- 手机横屏建议最小值设
250px，平板用320px，桌面可用360px - 别写
minmax(250px, 2fr)或minmax(250px, 100%)，前者破坏换行逻辑，后者在某些旧 Safari 中计算异常 - 父容器必须有明确宽度（
width: 100%或max-width），否则 Grid 无法算列数
图片不变形的关键不在 <img>，而在它的父容器
只给 <img> 设 width: 100% 和 object-fit: cover 是无效的——Grid 分配的是列宽，高度由图片原始尺寸撑开，不同比例图片会让整行高度不一致，导致错位。真正起作用的是用块级容器包裹，并在容器上设 aspect-ratio。
- 结构必须是：
<div class="gallery-item"><img src=""></div> -
.gallery-item { aspect-ratio: 4/3; overflow: hidden; }（比例按你图源调整） -
img { width: 100%; height: 100%; object-fit: cover; }，缺一不可 - 别给
<img>直接设height，DPR 高的屏幕会像素断裂
gap 必须用 clamp()，固定值在小屏上会压垮布局
gap: 1rem 在 375px 宽的手机上占屏比超 20%，视觉压迫感强；纯百分比又不被支持。用 clamp() 是目前最轻量可靠的方案，它不依赖媒体查询，且浏览器支持已覆盖 Safari 15.4+ 及所有现代浏览器。
- 推荐写法：
gap: clamp(0.5rem, 2vw, 1rem)—— 小屏最小 0.5rem，中屏随视口缩放，大屏封顶 1rem - 别分开写
row-gap和column-gap，除非你明确需要行列间距不同 - 如果父容器有
padding: 1rem，gap: 1rem会让边缘视觉留白变成 2rem，需同步调整
最容易被忽略的是图片加载前的跳动：没有 width 和 height 属性的 <img> 在懒加载时高度为 0，网格行高塌陷，后续所有图片错位。务必在 HTML 中写明原图尺寸，哪怕只是占位用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
