auto-fill比auto-fit更稳，因auto-fill按minmax最小值预占列位、空列保留、结构稳定，而auto-fit会拉宽最后一行导致变形；图片不变形需三层协同：容器设aspect-ratio、img设width/height 100%+object-fit:cover、网格父容器设响应式gap。
直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) + aspect-ratio 容器 + object-fit: cover 就能撑起骨架，但“不规则多图”真正难的不是列数自适应，而是混着 16:9、4:3、1:1 甚至竖图时，怎么不让网格错位、不留白、不变形——这三点全靠容器层控制，和 img 标签本身无关。
为什么 auto-fill 比 auto-fit 更稳
auto-fit 会把最后一行有内容的列强行拉宽到 1fr，一旦图片原始宽高比差异大（比如横图混着竖图），那一行就会被拉变形；auto-fill 则严格按 minmax() 的最小值预占列位，空列保留，结构对齐稳定，后续靠容器比例兜底。
-
auto-fill：列数 =floor(容器宽度 ÷ 最小宽度)，行为可预测，适合动态增删或后端返回尺寸混乱的图 -
auto-fit：适合卡片内容高度一致的场景，画廊里慎用，尤其没加justify-content: start时容易整体右偏 - 别混用
auto-fill和justify-content: center，空列存在会导致整行视觉偏移
图片不变形必须三层同时生效
Grid 只分配轨道宽度，不管高度；img 自身没有比例约束能力。漏掉任意一层，就会压扁、拉长、上下留白或跳动。
- 每张图的直接父容器（如
<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)，小屏不挤、大屏不空
小屏下空白、错位、跳变的根因与修复
调试时看到右边大片空白、图片错位、加载时布局跳动（CLS），大概率不是 Grid 写错了，而是上下文缺了关键样式或 HTML 属性。
立即学习“前端免费学习笔记（深入）”；
- 小屏只显示一列还留大片空白 →
minmax()第一个值设太大（如300px），iPhone SE 实际可用宽度约 340px，减去gap和边距后根本塞不下两列，建议手机端用minmax(240px, 1fr) - 图片被压扁或高度突兀拉长 → 没给容器设
aspect-ratio，或img漏了height: 100%和object-fit - 加载时布局跳动（CLS）→
<img>标签没写 HTML 属性width和height，浏览器无法预留空间
最易被忽略的是：所有控制都必须落在容器元素上，不能只样式化 img；Safari 15.4 以下不支持 clamp()，旧版需降级为固定 gap 值；另外，aspect-ratio 在 Safari iOS 15 及更早版本中可能缓存列数，旋转屏幕后不重算，加 resize 监听或强制重绘是临时解法。
