repeat(auto-fit, minmax(300px, 1fr)) 实现列数随容器宽度连续变化，minmax() 表示轨道宽≥下限且≤按1fr分配的剩余空间，auto-fit合并空轨道而auto-fill保留所有轨道，子项固定宽或脱离文档流会破坏计算。
直接用 repeat(auto-fit, minmax(300px, 1fr)) 就能实现列数随容器宽度连续变化，不需要媒体查询也能在手机、平板、桌面自动适配——前提是理解它怎么算，否则容易写成“看起来响应、实际卡死”的假响应式。
minmax() 不是“最小+最大”，而是“下限 + 弹性上限”
很多人把 minmax(300px, 1fr) 理解成“每列在 300px 到 1fr 之间取值”，这是错的。它实际表达的是：该轨道宽度必须 ≥ 300px，且 ≤ 它按 1fr 应得的那份剩余空间。
- 如果容器宽 850px，
minmax(300px, 1fr)允许最多放 2 列（2 × 300px = 600px ≤ 850px），剩下 250px 均分 → 每列 425px - 如果容器宽 280px，连一列 300px 都塞不下，浏览器会 fallback 为单列，宽度就是 280px（此时
1fr生效，占满） - 把
1fr换成auto（如minmax(300px, auto)）会导致列宽失去弹性约束，auto-fit失效，网格可能塌成一列或错乱 - 最小值别用
em或rem，字体缩放会干扰列数计算；更稳的是clamp(160px, 25vw, 300px)
auto-fit 和 auto-fill 的行为差异直接影响布局是否“干净”
auto-fit 会合并空轨道（即没有子元素的列），auto-fill 则保留所有符合 minmax() 条件的轨道，哪怕没内容也会留白。
- 卡片列表常用
auto-fit：避免小屏下右侧大片空白，也防止子项少时列数虚高 -
auto-fill更适合需要“预留槽位”的场景，比如仪表盘固定格子数、拖拽区域占位 - 嵌套网格中若用
auto-fill，子网格可能撑破父容器，尤其当父网格用了fit-content()或固定 px 宽度时 - DevTools 的 Layout 面板里勾选 “Show line numbers”，能直观验证轨道是否被合并
子项样式会悄悄破坏 auto-fit 的计算逻辑
即使 grid-template-columns 写对了，子项一旦加了固定尺寸或脱离文档流，auto-fit 就会失效。
立即学习“前端免费学习笔记（深入）”；
- 子项设
width: 200px或flex: 0 0 200px：会强行撑开列宽，导致换行错乱或横向溢出 - 子项用了
float、position: absolute或包裹在display: flex容器里：Grid 轨道计算中断，降级为普通块级流 - 子项内文字过长未处理：默认不折行，可能撑破最小宽度限制；建议加
overflow-wrap: break-word - 嵌套网格时，确保子网格的直接父容器也设了
display: grid，不能夹一层div+display: flex
移动端列数没变？先检查 minmax 的最小值是否合理
小屏下没缩列，不是 auto-fit 失效，而是 minmax() 的第一个参数设大了。
- 例如
minmax(300px, 1fr)在 320px 屏幕上，浏览器判断“连一列都塞不下”，于是 fallback 为单列——这其实是正确行为，但视觉上像“没响应” - 卡片类布局推荐从
minmax(160px, 1fr)起手，保证窄屏仍可读，又不会过度限制列数 - 某些安卓 WebView 对
auto-fit支持不全，可用@supports not (grid-template-columns: repeat(auto-fit, ))降级为 Flex - 真要调试，把容器 width 设为固定值（如
width: 400px），再看 Grid 如何分配列数，比靠眼睛猜更准
最常被忽略的一点：auto-fit 的“自动”只管列数和列宽，不管行高、内容截断、按钮溢出这些动态问题。它解决的是静态结构响应，不是内容适配。遇到文本长度不可控、权限控制按钮数量不一致等场景，纯 CSS 依然无解——这时候就得上 JS 检测，比如用 ResizeObserver 监听 scrollWidth > clientWidth。
