隐式轨道由 grid-auto-rows 和 grid-auto-columns 控制，用于未被 grid-template-areas 覆盖的行列；默认值为 auto，易导致高度塌陷或错位，需显式设置如 minmax(100px, auto) 或 1fr（容器需有明确高度）。
grid-template-areas 未覆盖区域的隐式轨道怎么定大小
显式定义 grid-template-areas 时，只写了部分区域（比如只写了 header / main / footer），但网格容器里还有没被命名的格子——这些位置会自动落入隐式网格中，它们的行高/列宽由 grid-auto-rows 和 grid-auto-columns 控制，而不是由 grid-template-rows 或 grid-template-columns 决定。
常见错误现象：grid-template-areas 看起来“漏掉”了几列，结果内容错位、高度塌陷，或者新加入的 div 没按预期换行，其实是隐式轨道默认为 auto，导致高度收缩到内容尺寸。
-
grid-auto-rows控制所有**未在grid-template-rows中显式声明的行轨道**（包括grid-template-areas横跨后多出来的行） -
grid-auto-columns同理，管的是列方向上“冒出来”的列 - 如果只设了
grid-template-rows: 100px 1fr，但grid-template-areas实际占了 4 行，后两行就走grid-auto-rows - 不设
grid-auto-rows时，隐式行默认是auto，容易造成高度不可控（尤其内联元素、空 div、flex 子项）
grid-auto-rows 的常用取值和实际效果
它不是“后备模板”，而是真实参与布局计算的轨道尺寸规则。选错值会导致内容溢出、截断或留白过大。
-
grid-auto-rows: minmax(100px, auto)—— 最小 100px，内容多就撑开，适合卡片类列表 -
grid-auto-rows: 1fr—— 所有隐式行均分剩余空间，但注意：只有在容器有明确高度（如height: 500px）时才有效，否则1fr退化为auto -
grid-auto-rows: 0px是危险操作：视觉上“消失”，但元素仍占文档流位置，可能引发点击穿透或 focus 失效 - 避免用
grid-auto-rows: fit-content(200px)套嵌套 flex 容器——fit-content在隐式轨道中兼容性差（Safari 15.4+ 才稳定）
当 grid-template-areas 和 grid-template-rows 不对齐时会发生什么
两者不匹配不是语法错误，但浏览器会静默合并处理：显式定义优先，多余行/列交由隐式规则接管。这个“交界处”最容易出视觉 bug。
例如：
display: grid;
grid-template-areas: "a b"
"c d";
grid-template-rows: 50px;
这里只定义了 1 行高，但 grid-template-areas 描述了 2 行，第二行就完全依赖 grid-auto-rows。如果没设，第二行就是 auto，可能只有 18px 高（纯文本行高）。
- 检查 DevTools 的 Layout 面板 → Grid → “Show line numbers”，能直观看到哪些线是显式、哪些是隐式生成的
- Chrome 和 Firefox 对隐式轨道的渲染一致，但 Safari 在
grid-auto-rows: subgrid场景下不支持（目前无替代方案） - 如果用
grid-row-start/end把某个项拉到第 5 行，而grid-template-rows只写了 3 行，中间第 4 行也归grid-auto-rows管
用 grid-auto-flow 控制隐式轨道的生成方向
grid-auto-flow 决定了新项往哪塞，间接影响隐式轨道是否被触发、以及生成多少条。它和轨道尺寸是协同关系，不能单独调优。
-
grid-auto-flow: row（默认）→ 新项从左到右、从上到下填，容易在列末尾追加隐式行 -
grid-auto-flow: column→ 新项从上到下、从左到右填，更容易生成隐式列（此时grid-auto-columns更关键） -
grid-auto-flow: dense会触发重排，可能让隐式轨道反复创建又销毁，动画或 JS 动态增删项时性能明显下降 - 搭配
grid-auto-rows: 100px+grid-auto-flow: column，很可能出现大量空白列——因为每新增一个项都新开一列，行高固定但列无限延展
隐式轨道本身没有名字、不参与 grid-area 引用，也不响应 @container 查询，它的存在感只体现在尺寸和位置上。越早明确设好 grid-auto-rows 和 grid-auto-columns，越少被“看不见的轨道”拖进调试深渊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
