auto-fit比auto-fill更适合图片画廊，因其将有内容的列拉伸填满整行，视觉紧凑且适配不同图片数量；需用包裹容器设aspect-ratio、img设width:100%;height:100%;object-fit:cover，配合clamp()响应式gap。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能跑通绝大多数场景，不需要 JavaScript，也不必写一堆媒体查询——但前提是图片容器必须包裹 <img alt="怎样使用CSS Grid快速搭建响应式图片画廊布局？" > 并设置 aspect-ratio，否则你看到的只会是错位、拉伸或留白不均。
为什么 auto-fit 比 auto-fill 更适合图片画廊
很多人抄代码时没注意 auto-fit 和 auto-fill 的行为差异，结果小屏下最后一张图被强行拉宽、整行高度被顶高。根本区别在于：
-
auto-fill会按minmax()最小值（比如250px）尽可能多占轨道，哪怕某行末尾有空白也保留空列，结构稳定但视觉松散 -
auto-fit会把“有内容的列”自动拉伸填满整行，更适合内容驱动型布局，视觉紧凑，且天然适配不同数量的图片 - 如果你后端返回的图片宽高比混乱（比如混着 16:9、4:3、1:1），
auto-fit配合容器级aspect-ratio才能真正控制整齐度
图片不变形的关键不在 ![怎样使用CSS Grid快速搭建响应式图片画廊布局？]()
标签本身
只给 <img alt="怎样使用CSS Grid快速搭建响应式图片画廊布局？" > 写 width: 100%; height: auto; 是无效的——Grid 分配的是列宽，高度由图片原始尺寸撑开，高矮不一的图会导致整行错位。真正起作用的是父容器。
- 每个图片必须包裹在
<div class="gallery-item"> 或 <code><figure></figure>中 - 在该容器上设置
aspect-ratio: 4/3（或你想要的比例），不是在<img alt="怎样使用CSS Grid快速搭建响应式图片画廊布局？" >上 -
<img alt="怎样使用CSS Grid快速搭建响应式图片画廊布局？" >本身设width: 100%; height: 100%; object-fit: cover; - 避免对
<img alt="怎样使用CSS Grid快速搭建响应式图片画廊布局？" >直接设固定height，DPR 高的设备容易出现像素断裂 - 用
gap: clamp(0.5rem, 2vw, 1rem)让间距随视口缩放，比纯rem更适应不同设备 - 小屏（
@media (max-width: 480px)）改用minmax(240px, 1fr)，iPhone SE 屏宽仅 375px，减去边距和 gap 后，250px 已经偏大 - 不要依赖 JS 切换 class 来响应旋转屏幕——Safari 旧版（iOS 15 及更早）可能缓存列数，CSS 原生方案更可靠
- 确保父容器有明确宽度，比如
width: 100%或max-width: 1200px，否则 Grid 无法计算列数
小屏下 gap 和最小列宽怎么调才不挤
固定 gap: 16px 在手机上会显得压迫，而单纯降 minmax() 下限又可能让列太窄。实际项目中更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：Grid 不负责图片渲染质量。即使布局完美，如果没用 srcset 提供多分辨率图，或者没做懒加载，在低端设备上仍会卡顿或模糊。这些不属于 Grid 职责，但却是上线前必须补上的环节。
