相册grid布局需用auto-fill替代auto-fit，并必须设置容器aspect-ratio、img的width/height/object-fit、以及gap与padding匹配；否则图片会拉伸、跳高、贴边或留白。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通大多数相册场景，但漏掉三处关键控制，图片照样会拉伸、跳高、贴边或留白——这不是 Grid 不行，而是没压住图片的默认行为。
为什么 auto-fit 和 auto-fill 在相册里效果差别很大
两者对“空轨道”的处理逻辑完全不同，直接影响最后一行是否变形：
-
auto-fit会把有内容的列拉伸填满整行，如果某行只剩一张 4:3 图，在小屏下它会被撑成 1fr 宽 → 高度跟着暴涨 → 脸被横向拉宽 -
auto-fill会按minmax()预占所有可能列（含空列），所有列宽度始终一致，混排 1:1 和 16:9 图时更稳 - 除非你明确需要居中对齐并保留边缘间隙（比如配
justify-content: center），否则相册初稿优先选auto-fill
必须加的三处样式，缺一不可
Grid 只管列数和间隙，不管图片怎么缩放。漏掉任何一项，aspect-ratio 就是摆设，object-fit 就不生效：
- 给
<img>的**直接父容器**（比如<figure></figure>或<div class="grid-item">）设 <code>aspect-ratio: 1 / 1（或4 / 3） - 在
<img>上写width: 100%; height: 100%; object-fit: cover;—— 单写width: 100%或height: auto都不行 - 网格容器设
gap: 12px，同时给容器加padding: 12px（值必须严格等于gap），否则最外侧图片会顶到边缘 - 图片高度参差不齐、网格行上下跳动 → 没给容器设
aspect-ratio，只写了img { width: 100% } - 小屏下只有一列，但右边大片空白 →
minmax()第一个值设太大（如300px），iPhone SE 实际可用宽度约 340px，减去gap × 2后塞不下第二列 - 最后一张图突然变胖 → 很可能用了
auto-fit，且该行只有一张图；换成auto-fill+ 同样minmax()值即可稳定 - 图片加载后布局抖动 → 没加
loading="lazy"，也没设alt，浏览器无法预占位
常见错误现象及对应修复点
这些不是“布局没生效”，而是 CSS 层级或作用对象错了：
真正难的不是写出这四五行 CSS，而是理解 minmax() 是“最小宽度优先”的弹性函数，以及 auto-fit 和 auto-fill 在空轨道上的语义差异——选错一个，相册在 iPad 横屏和桌面端之间就会突然跳列或漏间隙。
