repeat(auto-fit, minmax())能免媒体查询响应，因浏览器实时计算“容器宽÷(单列最小宽+gap)”得列数，仅生成有内容的列并均分剩余空间；auto-fill则保留所有满足条件的轨道。
为什么repeat(auto-fit, minmax())能不用媒体查询就响应
因为浏览器在布局时会实时计算：「当前容器宽度 ÷ (单列最小宽 + gap)」能塞下几列，然后只生成这些列，并把空轨道收掉，再把剩余空间均分给有内容的列。它不是靠预设断点，而是靠每次渲染都重算。
常见错误现象：auto-fill写成auto-fit——小屏下右侧大片空白；或minmax(200px, 1fr)里200px写死，窄屏仍强行两列，图片被压扁、文字折行跳动。
-
auto-fit：只保留有子元素的轨道，空轨道直接合并，适合卡片、图库等“内容驱动”场景 -
auto-fill：保留所有满足minmax()条件的轨道，哪怕没内容也留白，适合仪表盘占位格 - 列数临界点不是
200px × 列数，而是列数 × 最小宽 + gap × (列数 − 1)，gap越大，实际最小可用宽度越高
minmax()第一个参数不能写死像素值
写minmax(150px, 1fr)看似安全，但小屏下它仍允许两列并存（比如视口 320px，减去 gap 后剩 300px，刚好塞下两列 × 150px），结果是每列只有 150px 宽，图片被压缩、文字挤成多行、CLS 布局抖动全来。
真正让列数随屏幕变窄自动减少的办法，是让这个“最小值”本身响应：
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
minmax(max(150px, 34%), 1fr)——宽屏时 34% > 150px，Grid 抬高门槛，放弃第三列；窄屏时 150px 生效，确保单列不塌 - 百分比不是 magic number，33.4%～36% 都可试；gap 越大（如
gap: 40px），百分比建议略调高到 38% - 别用
minmax(min(150px, 50%), 1fr)：小屏下 50% 变小，反而鼓励多列，完全背离目标
图片项必须套容器并设 aspect-ratio
直接把 <img alt="如何使用CSS Grid的minmax和auto-fit实现无媒体查询响应式" > 放进 Grid 容器，在 Safari 和部分 Android WebView 中会忽略 object-fit 或缩放异常；更关键的是，没 aspect-ratio 的容器，图片加载前高度为 0，导致布局跳动（CLS）。
正确做法是每张图必须包裹一层容器：
- 外层
<div class="img-wrapper"> 设 <code>aspect-ratio: 4/3（按你图源比例调整） -
<img alt="如何使用CSS Grid的minmax和auto-fit实现无媒体查询响应式" >设width: 100%; height: 100%; object-fit: cover;，确保填满不拉伸 - 加
loading="lazy"，但首屏图显式写loading="eager"，否则 LCP 拖慢 -
srcset和sizes必须匹配真实容器宽度，比如 grid 列宽 ≈ 视口 90%，sizes就得写"90vw"，不能笼统写"100vw" - 缺
<meta name="viewport" content="width=device-width, initial-scale=1">：浏览器按桌面视口渲染，Grid 容器宽度算错，响应逻辑从第一步就崩了 - 子项设了固定
width（如width: 300px）或position: absolute：破坏 Grid 弹性行为，auto-fit失效 - 父容器本身被
max-width、padding或 flex 嵌套挤压：Grid 计算依据是父容器的可用宽度，不是视口，别让它被悄悄截断
三个地方一漏就全崩
再完美的 repeat(auto-fit, minmax()) 也会在以下三处当场失效：
最常被忽略的是 viewport 元标签和子项的固定宽限制——这两处一错，其余写得再对也没用。
