auto-fill比auto-fit更适合画廊初稿，因其按minmax()最小值（如250px）预占等宽列位，空位保留、结构稳定；而auto-fit会拉伸有内容的列至1fr，导致尺寸不一的图片被强制变形。
直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) + gap + aspect-ratio 就能跑通绝大多数场景，不用媒体查询，但必须包裹图片容器、不能只样式化 img 标签本身。
为什么 auto-fill 比 auto-fit 更适合画廊初稿
很多人一上来就抄 auto-fit，结果小屏下最后一张图被强行拉宽、变形严重——auto-fit 会把“有内容的列”拉伸填满整行，而画廊里每张图尺寸不一，它并不知道你想要的是“等宽格子”，而是盲目均分。相反，auto-fill 会按 minmax() 的最小值（比如 250px）尽可能多预占位，哪怕某行没填满，也保持列宽一致，后续靠 aspect-ratio 控制内部比例更可控。
-
auto-fill：列数 =floor(容器宽度 ÷ 最小宽度)，空位保留，行为可预测 -
auto-fit：列数相同，但会把实际存在的列拉伸到1fr，容易让窄图变胖、高图被裁更多 - 如果你后端返回的图宽高比混乱（比如混着
16:9和1:1），先用auto-fill稳住网格结构，再统一加容器约束
minmax(250px, 1fr) 里的 1fr 不是“填满”，而是“上限”
1fr 在这里不是让每列都撑满剩余空间，而是告诉浏览器：“单列最多可以占到均分后的那一份”。真正列宽由容器总宽 ÷ 列数决定。所以你设 minmax(300px, 1fr) 却在手机上只看到 1 列留大片空白，问题不在 1fr，而在 300px 太大——iPhone SE 屏宽才 375px，减去左右边距和 gap，根本塞不下两列。
- 保守起见，手机横屏最小宽度建议设
250px，平板可用320px，桌面再往上提 - 别写
minmax(250px, 2fr)或更大，2fr会让列宽翻倍，破坏自动换行逻辑 - 确保父容器有明确宽度（如
width: 100%或max-width），否则 Grid 无法计算列数
图片不变形的关键不在 img，而在它的父容器
只给 img 写 width: 100%; height: auto; 是无效的——Grid 分配的是格子宽度，高度由内容撑开，一旦图高矮不一，整行就会被最高那张图顶高，下面的行就错位。真正起作用的是给每个图片项（比如 <figure> 或 <div class="gallery-item">）加 aspect-ratio。
立即学习“前端免费学习笔记（深入）”；
- 必须用容器元素包裹
img，然后在该容器上设aspect-ratio: 4/3（或你期望的比例） -
img本身设width: 100%; height: 100%; object-fit: cover;，否则aspect-ratio不生效 - 别依赖
img { max-width: 100% }，它只管宽度，高度自由伸缩，一缩就压扁 - Safari 旧版（iOS 15 及更早）可能缓存列数，旋转屏幕后不重算，加
resize监听或强制触发重排可缓解
兼容性兜底要防“全跪”，不是“微调”
IE11 不支持 auto-fill、minmax()、aspect-ratio，强行 polyfill 成本高、效果差。与其花半天适配一个已淘汰的浏览器，不如用 @supports 干脆隔离：
gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
@supports not (display: grid) {
gallery { display: block; }
gallery > * { float: left; width: calc(33.333% - 1rem); margin-right: 1rem; }
}现代浏览器（Chrome 116+、Firefox、Safari 16.4+）已支持 grid-template-rows: masonry 实现瀑布流，但常规画廊仍推荐二维 Grid，因为语义清晰、对齐稳定——瀑布流本质是“放弃行对齐”，而多数设计需要的是整齐的网格基线。
