repeat(auto-fit, minmax(250px, 1fr))是实现列数随容器宽度自动增减的核心写法，其原理是浏览器先按250px最小宽度尝试生成列数，再由auto-fit合并空轨道，最后用1fr均分剩余空间；若失效，多因子项脱离文档流、父容器宽度受限或minmax参数设置不当。
直接写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现列数随容器宽度自动增减，但多数人卡在“看着动、实际不响应”——问题不在语法，而在轨道计算被悄悄破坏。
为什么 auto-fit + minmax() 看着没反应
这不是浏览器 bug，而是 minmax() 的两个参数被误解为“二选一”：它实际要求每列必须同时满足 ≥250px 且 ≤ 当前列应得的 1fr 份额。当容器太窄（比如手机 375px），若设了 minmax(400px, 1fr)，连一列都塞不下，Grid 就放弃生成列轨道，降级为单列流式布局（但此时你可能没给子项设宽或处理换行）。
- 检查 computed 样式里的
grid-template-columns值，它会显示浏览器最终解析出的列数和宽度，比猜更准 - 外层容器是否被
max-width: 1200px锁死，又没配width: 100%？Grid 计算的是父容器实际宽度，不是视口 - 祖先元素有没有
white-space: nowrap或overflow: hidden？它们会截断 Grid 的隐式行生成逻辑
auto-fit 和 auto-fill 到底该用哪个
auto-fit 会合并空轨道（即没子项的列），auto-fill 则保留所有符合 minmax() 条件的轨道，哪怕空白也占位。选错会导致小屏下右侧大片留白，或卡片错位溢出。
- 卡片列表、导航栏等“内容驱动”场景，一律用
auto-fit：避免子项少时列数虚高，也防止小屏右侧空列 - 仪表盘、拖拽占位区等“结构驱动”场景，才用
auto-fill：需要预留槽位，不能因内容缺失而塌缩 - 嵌套 Grid 中若误用
auto-fill，子网格可能撑破父容器——尤其当父网格用了fit-content()或固定px宽度时
子项样式怎么偷偷破坏 auto-fit
即使 grid-template-columns 写对了，子项加一行 width: 200px 或包在 display: flex 容器里，auto-fit 就立即失效。Grid 轨道计算依赖子项处于文档流中且尺寸可协商。
- 禁用
width、flex、float、position: absolute—— 这些会让子项脱离流，Grid 放弃为其分配轨道 - 长文本未处理？默认不折行，可能撑破
minmax()下限；加overflow-wrap: break-word更稳妥 - 嵌套 Grid 必须确保子网格的**直接父容器**设了
display: grid，中间夹一层div+display: flex就断链
什么时候必须放弃 auto-fit，改用媒体查询
repeat(auto-fit, ...) 只接受单一轨道定义，无法混写 200px 1fr 250px 这类混合结构。想固定侧边栏、让中间自适应，或要求“移动端堆叠、桌面端三栏”，就得切回显式声明 + @media。
- 左右固定 + 中间自适应：
grid-template-columns: 200px 1fr 250px - 左侧固定 + 中右弹性：
grid-template-columns: 200px 1fr 2fr - 配合断点降级：
@media (max-width: 768px) { grid-template-columns: 1fr; } - 固定像素值比百分比更可控，小屏下侧栏不会被压缩到看不见；中间用
1fr而非auto，防内容撑开列宽
真正难的不是写对那行 repeat()，而是理解浏览器如何一步步算出轨道数——它要先试填、再均分、最后合并空轨道。DevTools Layout 面板勾选 “Show line numbers”，一眼就能看出哪些列被 auto-fit 吃掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
