auto-fill比auto-fit更适合相册缩略图布局，因其按minmax最小值预占等宽轨道、结构稳定，配合aspect-ratio容器和object-fit图片可防变形；漏掉缩略图容器aspect-ratio、img的width/height/object-fit或gap预留余量任一环节，都会导致拉伸、塌陷或错位。
直接用 repeat(auto-fill, minmax(250px, 1fr)) 能跑通，但必须配齐三处样式：缩略图容器设 aspect-ratio、<img> 写 width: 100%; height: 100%; object-fit: cover;、网格容器设 gap 且 minmax() 第一个值要为 gap 留余量——漏掉任何一项，缩略图都会拉伸、塌陷或错位。
为什么 auto-fill 比 auto-fit 更适合带缩略图的相册
缩略图尺寸不一（比如混着 16:9 和 1:1），auto-fit 会把有内容的列强行拉伸到 1fr，导致窄图被横向撑胖；auto-fill 则按 minmax() 的最小值预占等宽轨道，结构稳定，后续靠容器 aspect-ratio 统一约束内部比例。
-
auto-fill：列数 =floor(容器宽度 ÷ 最小值)，空位保留，行为可预测 -
auto-fit：列数相同，但实际存在的列会被拉宽，容易让缩略图比例崩坏 - 如果你后续要 JS 动态插入新缩略图，
auto-fill预留的轨道还能自然承接，不用重排
minmax() 两个参数怎么设才不翻车
minmax(250px, 1fr) 看似简单，但第一个值设大了小屏塞不下，设小了大屏太密；第二个值写成 2fr 或 min-content 会让浏览器静默降级，失去响应能力。
- 最小值必须是带单位的绝对长度（
250px可行，25%或auto会导致列数冻结） - 最大值严格用
1fr，不能加空格或重复（1fr 1fr是语法错误） - 建议最小值比目标缩略图宽小 10–20px，为
gap留余量：目标图宽 250px，就写minmax(230px, 1fr) - iPhone SE 实际可用宽度常不足 300px，
minmax(280px, 1fr)在竖屏下只能出 1 列
缩略图不变形的关键三步，漏一步都不行
CSS Grid 只分配空间，不管图片怎么缩放。很多人直接对 <img> 加 aspect-ratio，结果 Safari 下失效、加载时跳动、比例崩坏——这是因为 aspect-ratio 在替换元素上需配合显式高度才稳定生效。
- 给每张缩略图的**直接父容器**（比如
<figure></figure>或<div class="thumb-item">）设 <code>aspect-ratio: 4/3或1/1 - 该容器内的
<img>必须写width: 100%; height: 100%; object-fit: cover;（仅width: 100%; height: auto无法约束高度） - 网格容器设
gap，但别用margin模拟间隙，否则缩放时列宽计算会错乱 -
<img>标签必须带alt属性，否则 SEO 和无障碍访问直接丢分 - 路径用相对路径（如
./thumbs/01.jpg），避免绝对路径或协议相对路径引发跨域或 404 - 加上
loading="lazy"，尤其缩略图多时能明显降低首屏阻塞 - 别把图直接塞进
background-image——这样alt、loading、SEO 全失效，object-fit也用不了
图片路径与加载稳定性要点
纯 CSS 网格不处理资源加载逻辑，但部署时这几个点常被忽略，一漏就影响 SEO、无障碍和首屏体验。
最易被忽略的是：没有独立容器包裹 <img>，而是直接对 <img> 应用 aspect-ratio。CSS 规范明确要求它在替换元素上需配合 height: 100% 才稳定生效，而多数人只写了 width: 100%，结果比例控制完全失效。
