用 auto-fill 而非 auto-fit 更适合图片画廊，因其预占列保持对齐；图片不变形需三层控制：容器设 aspect-ratio、img 设 width/height 100% + object-fit: cover、父容器设响应式 gap；漏任一环将导致变形或留白。
直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 就能撑起响应式骨架，但只写这一行，90% 的画廊会变形、错位或留白——问题不在 Grid 本身，而在容器比例、图片约束和间隙控制没跟上。
为什么 auto-fill 比 auto-fit 更适合图片画廊
画廊最后一行常有空位，auto-fill 会预占所有满足 minmax() 的列，保持网格对齐；auto-fit 则合并空列，导致剩余图片被横向拉伸（尤其当图宽高比不一致时）。
-
auto-fill：列数 =floor(容器宽度 ÷ 最小宽度)，结构稳定，适合动态增删图片或 hover 动画 -
auto-fit：适合内容密度优先的静态卡片布局，但需配合justify-content: start防止撑满 - 别混用
auto-fill和justify-content: center，空列存在会导致整体偏移
图片不变形必须配三层控制
Grid 只分配轨道，不管图片怎么缩放。漏掉任意一层，就会压扁、拉长或上下留白。
- 每张图的直接父容器（如
<div class="gallery-item">）必须设aspect-ratio: 4/3（或你实际需要的比例），写在<img>上无效 - 该容器内的
<img>要同时写width: 100%和height: 100%，再加object-fit: cover；只写width: 100%; height: auto会失高 - 网格父容器（如
.gallery）必须设gap，推荐gap: clamp(0.5rem, 2vw, 1rem)，小屏不挤、大屏不空
常见错误现象与修复点
调试时看到布局跳变、右边大片空白、图片错位，大概率不是 Grid 写错了，而是上下文缺了关键样式。
立即学习“前端免费学习笔记（深入）”；
- 小屏下只显示一列、右边大片空白 →
minmax()第一个值设太大（如300px），iPhone SE 实际可用宽度约340px，减去gap和边距后根本塞不下两列 - 图片被压扁或高度突兀拉长 → 没给容器设
aspect-ratio，或<img>漏了height: 100%和object-fit - 加载时布局跳动（CLS）→
<img>标签没写 HTML 属性width和height，浏览器无法预留空间 - Safari iOS 15 及更早旋转屏幕后列数不更新 → 需监听
resize事件并强制重绘，或加will-change: transform
兼容性与降级要点
旧版 Safari（iOS 15 及更早）对 1fr 在 minmax() 中支持不稳定，且 clamp() 在 Safari 15.4+ 才完整支持。
- 可为
minmax()加-webkit-前缀，或降级为minmax(250px, max-content)（但后者易溢出） - gap 降级方案：用固定值
gap: 0.75rem，避免依赖clamp() - 图片加载防跳动硬性条件：每个
.gallery-item设min-height（如150px），且<img>必须带width和height属性
最易被忽略的是：以为写了 minmax(250px, 1fr) 就万事大吉，却没意识到 aspect-ratio 必须作用于容器而非图片本身，且该容器还得是 <img> 的直接父级。
