auto-fill比auto-fit更适合相册初稿，因auto-fill按minmax预占位、保持等宽不拉伸，而auto-fit会撑开窄图导致变形；需三处样式：图容器设aspect-ratio、img设width/height/object-fit、网格容器设gap且minmax预留gap余量。
直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 就能跑通绝大多数相册场景，不需要媒体查询、不依赖 JS、图片不变形——前提是容器有宽度、图片加了 width: 100%、且包裹了容器元素。
为什么 auto-fill 比 auto-fit 更适合相册初稿
auto-fit 会把“有内容的列”强行拉伸填满整行，一旦某行只剩一张窄图（比如 4:3 图在横屏手机上只占半宽），它就会被撑成 1fr 宽度，高度跟着拉长、比例崩坏。auto-fill 则老老实实按 minmax(250px, 1fr) 预占位：哪怕最后一行只有一张图，也保留空列宽度，所有列始终等宽。这对宽高比混乱的图源（1:1 + 16:9 混排）特别友好。
常见错误现象：
- 最后一张图突然变胖、脸被横向拉伸 → 很可能用了
auto-fit - 小屏下只显示一列，但右边留大片空白 →
minmax()第一个值设太大（如300px），iPhone SE 实际可用宽度仅约 340px，减去gap后塞不下第二列
必须加的三处样式控制
Grid 只管列数和间隙，不管图片怎么缩放。漏掉任何一项都可能导致溢出、拉伸或高度塌陷。
- 给每张图的**直接父容器**（比如
<figure></figure>或<div>）设 <code>aspect-ratio: 4/3或1/1，强制维持比例 - 图容器内
img必须写width: 100%; height: 100%; object-fit: cover;—— 单靠width: 100%; height: auto无法约束高度，object-fit才生效 - 父网格容器要设
gap，但minmax()的最小值别硬套图片宽度：比如目标图宽 250px，建议写minmax(230px, 1fr)，为gap留余量 -
img标签必须带alt属性，否则 SEO 和无障碍访问直接丢分 - 路径用相对路径（如
./photos/01.jpg），避免绝对路径或协议相对路径引发跨域或 404 - 加上
loading="lazy"，尤其相册图多时能明显降低首屏阻塞 - 别把图直接塞进
background-image—— 这样alt、loading、SEO 全失效，object-fit也用不了
图片路径与加载稳定性要点
纯 CSS 网格不处理资源加载逻辑，但实际部署时这几个点常被忽略：
最易被忽略的是：没有独立容器包裹 img，而是直接对 img 应用 aspect-ratio。CSS 规范明确要求 aspect-ratio 在替换元素（如 img）上需配合 height: 100% 才稳定生效，而多数人只写了 width: 100%，结果比例控制完全失效。
