必须用 auto-fill 而非 auto-fit，因 auto-fit 会强制拉伸不同宽高比图片导致变形，auto-fill 按最小值预占等宽轨道、保留空位、结构可控；minmax() 最小值需减去 gap 留余，最大值严格用 1fr；缩略图父容器须设 aspect-ratio、img 须设 width/height/object-fit、网格容器须用 gap。
auto-fill 比 auto-fit 更稳，尤其当缩略图宽高比不统一时；直接套用 repeat(auto-fit, minmax(250px, 1fr)) 很可能让窄图被横向撑胖、布局错位。
为什么必须用 auto-fill 而不是 auto-fit
auto-fit 会把“有内容的列”全部拉伸到 1fr，不管图片本身是 16:9 还是 1:1 —— 结果就是同一行里，一张竖图被压扁、一张横图被拉宽。auto-fill 则按 minmax() 的最小值（如 250px）预占等宽轨道，空位保留，结构可控，后续靠容器约束比例才不会崩。
- 列数计算明确：
floor(容器宽度 ÷ 最小值)，行为可预测 - JS 动态插入新缩略图时，预留轨道能自然承接，无需重排
- 旋转手机屏幕或 resize 窗口时，Safari 旧版也不易卡住列数（iOS 15 及更早版本常见此问题）
minmax() 两个参数怎么设才不翻车
minmax(250px, 1fr) 看似通用，但第一个值若没为 gap 留余量，小屏下就会塞不下两列；第二个值写成 2fr 或 min-content，浏览器会静默降级，失去响应能力。
- 最小值必须是带单位的绝对长度（
250px可行，25%或auto会导致列数冻结） - 最大值严格用
1fr（不是语法错误，而是当前主流浏览器广泛支持的非标准扩展；若追求极致兼容，可用100%替代） - 建议最小值 = 目标缩略图宽 −
gap值 × 2（例如目标图宽250px、gap: 12px，就写minmax(226px, 1fr)） - iPhone SE 竖屏实际可用宽度常不足
300px，minmax(280px, 1fr)在该场景下只能出 1 列
缩略图不变形的三处硬性样式缺一不可
CSS Grid 只分配空间，不管图片怎么缩放。漏掉任何一项，都会出现拉伸、塌陷或上下错位。
- 每张缩略图的**直接父容器**（如
<figure>或<div class="thumb-item">）必须设aspect-ratio: 4/3（或你实际需要的比例） - 该容器内的
<img>必须写width: 100%; height: 100%; object-fit: cover;（仅width: 100%; height: auto无法约束高度） - 网格容器必须用
gap控制间距，不能用margin模拟——否则缩放时列宽计算会错乱
容易被忽略的父容器与加载稳定性
很多人把 CSS 写对了，但画廊仍跳动、错位或 SEO 不友好，问题常出在结构层。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确宽度（
width: 100%或max-width），否则 Grid 无参照，minmax()失效 -
<img>标签必须带alt属性，且内容准确描述图像主体（不可留空或写“图1”） - 不要对
<img>直接设height或flex-shrink: 0，高 DPR 设备下易像素断裂 - 若需适配多分辨率，优先用
<picture>+srcset，而非background-image（语义丢失、无障碍失效）
auto-fill 预占、minmax() 留隙、三层比例控制闭环。少一个，缩略图就可能在某个设备上突然变形或错位。 
