auto-fit 会合并空轨道使子项均分整行，适用于内容驱动场景；auto-fill 保留所有符合条件的轨道（含空白），适用于结构驱动场景；二者逻辑本质不同，选错则响应式失效。
直接写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现列数随容器宽度自动增减，但多数人写的“响应式”其实只是静态快照——浏览器根本没在协商列数，而是降级成了单列流式布局。
为什么 minmax(250px, 1fr) 不是“最小或最大”
它实际表达的是：该列轨道必须同时满足 ≥ 250px，且 ≤ 它按 1fr 应得的那份剩余空间。浏览器不是二选一，而是在下限站住脚的前提下，把多出来的宽度均分给所有有内容的列。
- 容器宽 900px → 最多塞 3 列（3 × 250px = 750px ≤ 900px），剩余 150px 均分 → 每列约 350px
- 容器宽 200px → 连一列都塞不下，
auto-fit放弃生成多列轨道，只留一条1fr轨道 → 子项占满整行 - 把
1fr换成2fr或max-content：浏览器直接忽略第二参数，退化为minmax(250px, auto) - 最小值别用
em或rem：字体缩放会干扰列数计算；更稳的是clamp(160px, 25vw, 300px)
auto-fit 和 auto-fill 选错就白写
两者行为差异直接影响视觉是否“干净”，不是风格偏好，而是逻辑分叉点。
-
auto-fit会合并空轨道（即没有子元素的列），已有子项均分整行宽度 —— 卡片列表、导航栏等“内容驱动”场景必须用它 -
auto-fill强行保留所有符合minmax()条件的轨道，哪怕空白也占位 —— 仅适用于仪表盘、拖拽占位区等“结构驱动”需求 - 嵌套 Grid 中误用
auto-fill，子网格可能撑破父容器，尤其当父网格用了fit-content()或固定px宽度时 - DevTools 的 Layout 面板里勾选 “Show line numbers”，能直观验证轨道是否被合并 —— 空轨道消失才是
auto-fit在生效
子项样式会悄悄让 auto-fit 失效
即使 grid-template-columns 写对了，只要子项加了一行破坏文档流的样式，Grid 就放弃轨道协商，整个响应式逻辑当场中断。
- 子项设
width: 200px、flex: 0 0 200px或包裹在display: flex容器里：Grid 认为尺寸不可协商，降级为块级流 - 子项用了
float、position: absolute：脱离文档流，轨道计算中断 - 子项内文字过长未处理：默认不折行，可能撑破
minmax()下限；加overflow-wrap: break-word更稳妥 - 嵌套 Grid 必须确保子网格的**直接父容器**设了
display: grid，中间夹一层div+display: flex就断链
真正卡住人的从来不是语法，而是浏览器在背后做的轨道协商——它依赖父容器真实宽度、子项自然尺寸、以及所有参与计算的样式都处于可协商状态。一旦其中任一环节被外力锁定（比如固定宽、脱离流、祖先 overflow 截断），auto-fit 就不再“自适应”，而变成“假装自适应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
