auto-fit不是可有可无的选项，因为它会合并空轨道、只保留有内容的列并均分容器宽度；而auto-fill强制预留所有满足minmax()条件的轨道，导致小屏留白或列数虚高。
直接用 repeat(auto-fit, minmax()) 就能实现列数自适应的卡片网格，但必须配对使用 auto-fit 和合理的 minmax() 参数，否则小屏下会留白、换行错乱或根本不动。
为什么 auto-fit 不是可有可无的选项
auto-fit 会合并空轨道（即没内容的列），只保留有子项的列并拉伸填满容器；auto-fill 则不管有没有内容，只要满足 minmax() 条件就预留轨道。卡片类布局几乎总是要 auto-fit —— 否则小屏下右侧会出现大片空白，或者子项少时列数虚高。
- 浏览器 DevTools 的 Layout 面板里勾选 “Show line numbers”，能直观看到轨道是否被合并
- 仪表盘固定格子数、拖拽占位区等场景才考虑
auto-fill - 嵌套 Grid 中若误用
auto-fill，子网格可能撑破父容器，尤其当父容器宽度为fit-content()或固定 px 时
minmax(250px, 1fr) 不是“最小或最大”，而是双重约束
它表示：该列宽必须 ≥ 250px，且 ≤ 它按 1fr 应得的那份剩余空间。浏览器不是二选一，而是在满足下限的前提下均分多出的空间。
- 容器宽 900px → 最多塞 3 列（3 × 250 = 750 ≤ 900），剩余 150px 均分 → 每列 350px
- 容器宽 200px → 连一列都塞不下，降级为单列，宽度就是 200px（此时
1fr生效，占满） - 最小值别用
em或rem：字体缩放会干扰列数计算；更稳的是clamp(160px, 25vw, 300px) - 把
1fr换成auto或max-content：列宽失去弹性，auto-fit失效，网格可能塌成一列或横向溢出
子项样式会悄悄破坏 auto-fit 的计算逻辑
即使 grid-template-columns 写对了，子项一旦加了固定尺寸或脱离文档流，auto-fit 就会失效。
- 子项设
width: 200px或flex: 0 0 200px：强行撑开列宽，导致换行错乱或横向溢出 - 子项用了
float、position: absolute，或包裹在display: flex容器里：Grid轨道计算中断，降级为普通块级流 - 子项内文字过长未处理：默认不折行，可能撑破最小宽度限制；建议加
overflow-wrap: break-word - 嵌套 Grid 时，确保子网格的直接父容器也设了
display: grid，不能夹一层div+display: flex
什么时候必须搭配 @media 和 grid-template-areas
当你要调整「头部在哪」「侧边栏是否堆叠」「页脚是否跨全宽」这类语义级结构时，grid-template-areas 比调列数更直观。单纯靠 repeat() 只能控制卡片数量，管不了整体页面骨架。
- 先用字符串模板定义区域名，比如
"header header" "nav main" "footer footer"，每组引号是一行，空格分隔列 - 每个网格项用
grid-area: header等对应命名，名字必须完全一致，大小写敏感 -
grid-template-areas要求所有行的列数一致，不能某行写两个词、下一行写三个词，否则整条规则失效 - 移动端改成
"header" "nav" "main" "footer"时，注意nav和main必须各自独占一行，不能漏掉
最常被忽略的是子项的 width 和 display 行为——它们不声不响地覆盖 Grid 的轨道计算，让看似正确的 repeat(auto-fit, minmax()) 彻底失效。动手前先检查子项有没有偷偷设固定宽、浮动或绝对定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
