auto-fit比auto-fill更适合图片网格，因其收掉空列、让有内容的列均分剩余空间，避免小屏下单图被撑宽变形；需配合aspect-ratio容器、object-fit图片及gap预留三者缺一不可。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 搭配 aspect-ratio 和 object-fit 就能跑通，但漏掉任意一层都会导致图片拉伸、留白或布局跳动——这不是 Grid 写错了，而是上下文没配齐。
为什么 auto-fit 比 auto-fill 更适合图片网格
auto-fit 会收掉空列，把有内容的列均分剩余空间；auto-fill 则强行预占等宽列位，小屏下单图会被撑满整行，人脸横向拉伸、竖图裁切加剧是典型表现。实际项目中，auto-fit 更可控、更符合“图片画廊”的直觉预期。
- 列数计算逻辑一致：都是
floor(容器宽度 ÷ minmax() 第一个值) - 但渲染结果不同：
auto-fit的列宽随内容动态均分，auto-fill的列宽被minmax()最小值锁死 - 混排 1:1 和 16:9 图片时，
auto-fit能保持整体节奏稳定；auto-fill容易让某张图突然变胖 - 调试时看到
grid-column-end值跳变却无视觉变化，大概率是误用了auto-fill却期待auto-fit效果
必须加的三层样式控制
Grid 只管列数和间隙，不管图片怎么缩放。漏掉任何一层，都会导致变形、留白或错位。
- 给每张图的**直接父容器**（如
<figure></figure>或<div class="gallery-item">）设 <code>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留余量 - 小屏下只显示一列、右边大片空白 →
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触发重排
常见错误现象与修复点
不是 Grid 写错了，而是上下文没配齐。以下问题几乎都出在细节上：
别踩这些隐性坑
最易被忽略的是：直接对 <img> 标签应用 aspect-ratio。CSS 规范要求它在替换元素上需配合 height: 100% 才稳定生效，而多数人只写 aspect-ratio: 1/1 就停手了——这在 Safari 和部分旧版 Chrome 中会失效。
另一个隐形雷区是 gap 和 overflow: hidden 共存：给网格容器加了 border-radius 并同时设 overflow: hidden，某些 Safari 版本（如 iOS 15.4）会出现圆角内 gap 不生效的问题。此时可改用 padding 替代部分 gap，或加一层 <div class="wrapper"> 包裹。</div>
