repeat(auto-fit, minmax(250px, 1fr)) 实现流体响应，因浏览器按容器宽度动态调整列数而非列宽，auto-fit 收缩空轨道，确保有内容的列均分可用空间。
为什么直接写 repeat(auto-fit, minmax(250px, 1fr)) 就能流体响应
因为浏览器在每次布局时都会重新测量容器宽度，然后基于 minmax(250px, 1fr) 的约束动态计算最多能放几列：每列不能窄于 250px，多出的空间由所有列用 1fr 均分。关键不是“列宽变”，而是“列数变”——容器缩到 500px，就只能塞下两列；缩到 249px，就只剩一列。
这个过程不依赖 JavaScript，也不触发重排警告，但前提是：auto-fit 必须作用于有内容的网格项上，且父容器宽度可被准确读取。
-
auto-fill会保留所有生成的轨道（哪怕没子元素），小屏下容易出现不可见空白列，撑开容器或破坏对齐 -
auto-fit会把空轨道收缩为 0 宽，让有内容的列拉伸占满整行——这才是“流体”的本质 - 如果列数始终卡死不变，先检查是否漏写了
display: grid，或者父容器被flex或max-width错误截断了可用宽度
子元素不收敛，minmax() 再合理也没用
常见现象是：设了 minmax(280px, 1fr)，但手机上还是两列、错位、横向滚动。问题几乎全出在子项自身——它们悄悄顶开了最小宽度限制。
- 图片没加
max-width: 100%和height: auto，硬撑破列宽 - 子项用了
display: flex，内部又有flex: 1，触发浏览器默认的min-width: auto，必须显式覆盖为min-width: 0 - 文字块含
white-space: nowrap或未设overflow: hidden，强制轨道拓宽 - 父容器外层有
white-space: nowrap，导致整个 grid 容器宽度异常
minmax() 的两个参数到底怎么选
minmax(250px, 1fr) 不是“这列固定 250px”，也不是“最大只能到 1fr”——它定义的是单个轨道的弹性区间，最终列宽由所有轨道协商决定。
- 第一参数（最小）要可达成：设成
minmax(400px, 1fr)却只给 300px 宽容器，结果就是列数归零 → 实际只显示一列 - 第二参数（最大）推荐用
1fr：表示“参与均分”，写max-content易溢出，写死300px则失去弹性 - 别用
minmax(100%, 1fr)：百分比在 grid 中无意义，会退化为minmax(0, 1fr)，列宽失控 - 图文卡片建议
minmax(280px, 1fr)，纯文字列表可降到minmax(200px, 1fr)
移动端单列失效？先看这三处硬伤
桌面正常、手机仍多列或错位，大概率不是 Grid 写错了，而是基础环境没配好。
- 忘了加
<meta name="viewport" content="width=device-width, initial-scale=1">，浏览器按桌面视口渲染移动端 -
gap值过大（比如gap: 40px），窄屏下挤占太多空间，迫使列数提前减少甚至内容溢出 - 子元素设置了
min-width或固定宽（如width: 300px），强行撑开网格项，minmax()的弹性逻辑直接失效
最易被忽略的一点：Grid 的响应式能力完全依赖父容器宽度。如果 .container 外层有 max-width 但没配 margin: 0 auto，或者被上层 flex 容器设了 flex: 0 0 auto，那 auto-fit 就失去了计算依据——调再多次 minmax() 参数也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
