auto-fit + minmax(250px, 1fr) 是核心写法，它使列数随容器宽度自动增减，小屏退为一列、桌面撑出四列；需配合直接父容器的 aspect-ratio、img 的 width/height/object-fit 及网格 gap 才能防变形留白。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能跑通，但漏掉 aspect-ratio 或写错 minmax() 的参数顺序，图片一定会变形或留白——这不是 Grid 失效，而是子项没被约束。
为什么 auto-fit + minmax(250px, 1fr) 是核心写法
它让列数随容器宽度自动增减：小屏下自然退为一列，桌面端轻松撑出四列，全程无需媒体查询。关键在 1fr 是弹性上限信号，不是固定值——浏览器会把剩余空间均分给所有有内容的列，避免卡死。
-
minmax(250px, 1fr)中的250px是最小宽度，1fr表示“有空间就分”，不是“最大允许 1fr” - 别写成
minmax(250px, 300px)：硬上限会让窄屏无法塞入两列，结果只剩一列还带大片空白 - 也别混用单位，比如
minmax(30%, 1fr)，整条规则会被忽略 - 旧版 Safari（iOS 15 及更早）对
1fr在minmax()中支持不稳定，可加-webkit-前缀或降级为minmax(250px, max-content)（但后者易溢出）
图片不变形必须配三层控制
Grid 只管轨道分配，不管图片怎么缩放。漏掉任意一层，就会拉伸、压扁或上下留白。
- 每张图的**直接父容器**（如
<div class="gallery-item">）必须设aspect-ratio: 4/3或1/1—— 直接写在<img>上无效 - 该容器内的
<img>要写width: 100%; height: 100%; object-fit: cover;，只写width: 100%; height: auto;会失高 - 网格父容器（
.gallery）必须设gap，推荐用gap: clamp(0.5rem, 1vw, 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触发重排
最易被忽略的是：以为写了 minmax(250px, 1fr) 就万事大吉，却没意识到 aspect-ratio 必须作用于容器而非图片本身，且该容器还得是 <img> 的直接父级——中间插个 <p> 或没设 display: block，aspect-ratio 就不生效。
