auto-fill比auto-fit更适合图片画廊，因其按minmax()最小值预占等宽列位，保持各列宽度一致，避免小屏下单图被拉伸变形；而auto-fit会拉伸有内容的列填满整行，导致比例失真。
用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 就能跑通，但必须配 aspect-ratio 容器 + object-fit 图片，否则网格再准，图片也会拉伸、压扁或溢出。
为什么 auto-fill 比 auto-fit 更适合图片画廊
auto-fit 会把“有内容的列”拉伸填满整行，小屏下只剩一张窄图时，它会被强行撑宽、高度跟着拉长——人脸横向拉伸、竖图被裁更多是典型表现。auto-fill 则按 minmax() 的最小值（比如 250px）预占等宽列位，哪怕最后一行只有一张图，也保留空列宽度，所有列始终一致，后续靠容器比例控制更可控。
- 混排 1:1 和 16:9 图片时，
auto-fill结构稳定；auto-fit容易让某张图突然变胖 -
auto-fill的列数 =floor(容器宽度 ÷ 最小宽度)，行为可预测；auto-fit的列数相同，但实际宽度不可控 - 调试时看到 grid-column-end 值跳变却无渲染，大概率是误用了
auto-fill却期待auto-fit效果
必须加的三层样式控制
Grid 只管列数和间隙，不管图片怎么缩放。漏掉任何一层，都会导致变形、留白或错位。
- 给每张图的**直接父容器**（如
<figure>或<div class="gallery-item">）设aspect-ratio: 4/3或aspect-ratio: 1/1，强制维持比例 - 容器内的
<img>必须写width: 100%; height: 100%; object-fit: cover;—— 单靠width: 100%; height: auto无法约束高度 - 网格父容器设
gap: 1rem，但minmax()的最小值建议比目标图宽小 10–20px（如图宽 250px，写minmax(230px, 1fr)），为gap留余量
常见错误现象与修复点
不是 Grid 写错了，而是上下文没配齐。以下问题几乎都出在细节上：
立即学习“前端免费学习笔记（深入）”；
- 小屏下只显示一列、右边大片空白 →
minmax()第一个值设太大（如300px），iPhone SE 实际可用宽度约 340px，减去左右边距和gap后塞不下两列 - 图片被压扁或高度突兀拉长 → 没给容器设
aspect-ratio，或只写了width: 100%却漏了height: 100%和object-fit - 加载时布局跳动（CLS）→ 图片标签没写
width和height属性（HTML 属性，非 CSS），浏览器无法预留空间 - Safari iOS 15 及更早版本旋转屏幕后列数不更新 → 需监听
resize事件并强制重绘，或加will-change: transform触发重排
别踩这些隐性坑
最易被忽略的是：直接对 <img> 标签应用 aspect-ratio。CSS 规范要求它在替换元素上需配合 height: 100% 才稳定生效，而多数人只写了 width: 100%，结果比例控制完全失效。另一个隐形依赖是父容器必须有明确宽度来源——width: 100% 或 max-width: 1200px 都行，但若父级是 inline-grid 或被 float 影响，auto-fill 就算写对了也计算不出正确列数。
