用 auto-fill + minmax(250px,1fr) + gap + aspect-ratio 容器可免媒体查询实现稳定响应式画廊，需避开不设父宽、误设 1fr 为填充、忽略容器比例三大陷阱。
直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) + gap + 图片容器包裹 + aspect-ratio 就能跑通绝大多数场景，不用媒体查询，但必须避开三个关键陷阱：不包容器、乱设 minmax() 第二个参数、忽略父容器宽度约束。
为什么 auto-fill 比 auto-fit 更适合画廊初稿
很多人一上来就抄 auto-fit，结果小屏下最后一张图被拉宽变形——auto-fit 会把“有内容的列”全部拉伸到 1fr，而画廊里图片宽高比混乱（比如混着 16:9 和 1:1），它并不知道你想要的是等宽格子。相反，auto-fill 按 minmax() 的最小值（如 250px）预占位，空位保留，列宽始终一致，后续靠 aspect-ratio 控制内部比例更可控。
-
auto-fill：列数 = floor(容器宽度 ÷ 最小宽度)，空列也占位，结构稳定，适合 JS 动态增删项或 hover 动画 -
auto-fit：列数相同，但空列会被压缩掉，视觉紧凑，适合静态画廊 - 如果你后端返回的图尺寸不统一，先用
auto-fill稳住网格骨架，再统一加容器约束
minmax(250px, 1fr) 里的 1fr 不是“填满”，而是“上限”
1fr 在这里不是让每列都撑满剩余空间，而是告诉浏览器：“单列最多可以占到均分后的那一份”。真正列宽由容器总宽 ÷ 列数决定。所以你设 minmax(300px, 1fr) 却在 iPhone SE（屏宽 375px）上只看到 1 列留大片空白，问题不在 1fr，而在 300px 太大——减去左右边距和 gap，根本塞不下两列。
- 手机横屏最小宽度建议设
250px，平板可用320px，桌面再往上提 - 别写
minmax(250px, 2fr)或更大，2fr会让列宽翻倍，破坏自动换行逻辑 - 确保父容器有明确宽度（如
width: 100%或max-width），否则 Grid 无法计算列数
图片不变形的关键不在 img，而在它的父容器
只给 img 写 width: 100%; height: auto; 是无效的——Grid 分配的是格子宽度，高度由内容撑开，一旦图高矮不一，整行就会被最高那张图顶高，下面的行就错位。必须用容器约束比例，再让图片填满它。
- 给每张图套一层
<div class="gallery-item"><img></div> -
.gallery-item设aspect-ratio: 4/3（或你实际需要的比例）和overflow: hidden -
img设width: 100%; height: 100%; object-fit: cover; - 千万别只设
width: 100%不设height，也别对img直接写死min-width或flex-shrink: 0，这会让 Grid 无法压缩列宽
移动端小屏下 gap 过大、列数过少？检查这些隐性限制
不是 minmax() 失效，而是内边距、外边距或最小宽度阈值卡住了换行逻辑。例如小屏上图片挤成一列还留大片空白，大概率是 gap 占比变大或容器内边距挤压了可用宽度。
- 用
clamp()控制gap：gap: clamp(0.5rem, 2vw, 1rem)，比纯rem更适应缩放 - 小于
480px时，改用repeat(auto-fit, minmax(240px, 1fr)))，避免单列过窄 - 确认没有全局重置样式把
margin或padding设得过大，挤压可用宽度 - 某些安卓 WebView 对
auto-fit支持不稳定，真遇到问题可加@supports (display: grid)特征检测兜底
最常被忽略的点是：Grid 只管布局，不管图片怎么显示；minmax() 必须嵌在 repeat() 里才生效；aspect-ratio 要作用在容器上，而不是 img 标签本身。这三个动作缺一不可，否则看起来“响应了”，实则错位、变形、留白失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
