最可靠方案是CSS Grid配合auto-fit与minmax()，核心语法为grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，其中280px为每列最小宽度阈值，auto-fit确保填满空间不溢出，避免使用auto-fill或固定列数。
用 CSS 制作自适应图片画廊，display: grid 配合 auto-fit 和 minmax() 是当前最可靠、代码最少、维护成本最低的方案。Flexbox 也能做，但列数动态变化时容易出错；纯媒体查询写死断点则难维护。
grid-template-columns: repeat(auto-fit, minmax(...)) 怎么写才不溢出
这是核心语法，但写错一个参数就会导致移动端横向滚动或图片被压扁：
-
minmax(280px, 1fr)中的280px是最小宽度阈值，不是“建议宽度”——它决定了每列能塞下的最小尺寸；设太高（比如400px）在手机上直接溢出 - 必须用
auto-fit，不是auto-fill：前者会收缩多余列填满空间，后者保留空列占位，造成右侧大片空白 - 别写成
repeat(3, 1fr)或repeat(4, 25%)：这种写法完全失去响应性，小屏照样三列，图片被挤成细条 - 如果要兼容极窄屏（如折叠屏展开态宽度 @media (max-width: 280px) { grid-template-columns: 1fr; }
图片变形、错位、间隙不均的常见原因
这些问题几乎都源于对 img 元素默认行为的误判，而不是 Grid 本身有问题：
-
img默认是display: inline，换行符会产生看不见的间隙——必须加display: block或设父容器font-size: 0 - 给
img写了width或height内联样式或 CSS，会覆盖aspect-ratio——删掉它们，只留width: 100%和height: auto -
object-fit: cover是安全选择，但若想完整显示全部内容，改用object-fit: contain；注意两者对容器高度的影响不同 - 间隙靠
gap控制，不是margin：把gap写在 .gallery 上，别写在.gallery img上，否则 gap 不生效
aspect-ratio 在宽高未知时怎么起作用
aspect-ratio 不是“魔法”，它需要图片成为 Grid 直系子元素且未被拉伸才能生效：
立即学习“前端免费学习笔记（深入）”；
- 确保
img是.gallery的直接子元素，中间不要套div包裹层 - 设
img { width: 100%; height: auto; aspect-ratio: 4/3; }，浏览器会在 layout 阶段就预留空间，避免加载后重排抖动 - 服务端能返回宽高更好：在 HTML 中写
<img src="x.jpg" width="800" height="600">，浏览器立刻知道比例，比纯 CSS 更稳 - IE 完全不支持
aspect-ratio，但 IE 也不支持 Grid——真要兼容，只能降级用 padding-top 百分比技巧，代价是结构更复杂
真正难的不是写出第一版网格，而是当图片来自 CMS、上传尺寸不一、缩略图生成失败、甚至部分图片 404 时，布局还能保持稳定。这时候 minmax(0, 1fr)、overflow: hidden 和提前声明宽高，比任何 fancy 效果都重要。
