grid-auto-rows和grid-auto-columns必须显式设置，用于定义隐式网格轨道尺寸；默认auto值易导致高度塌陷、宽度失控，需设为固定值、fr或minmax等以确保布局稳定。
grid-auto-rows 和 grid-auto-columns 必须显式设置
隐式网格行/列的大小不会自动继承显式轨道的尺寸，浏览器默认用 auto（内容撑开），不是你期望的固定高或等分空间。比如写了 grid-template-columns: 1fr 1fr，但新增第 3 个子项时，它会进第 2 行——而这行高度是 auto，可能高矮不一。
解决办法只有显式声明：
-
grid-auto-rows: 120px—— 所有隐式生成的行统一为 120px 高 -
grid-auto-columns: 1fr—— 隐式列按比例分配剩余宽度（需配合grid-auto-flow: column） -
grid-auto-rows: minmax(100px, auto)—— 最小 100px，内容多就自适应撑开
漏掉这两个属性，grid-row: 5 或 grid-column: 10 这类跳着定位的项，其所在行/列尺寸就不可控。
grid-auto-flow 决定隐式轨道方向，但不定义尺寸
grid-auto-flow: row（默认）会让新项按行优先填满，grid-auto-flow: column 则按列优先——但无论哪种，都不会自动给隐式轨道设宽高。它只管“往哪放”，不管“放多大”。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 加了
grid-auto-flow: column却没设grid-auto-columns→ 新列宽度为auto，内容窄就窄，宽就溢出 - 同时写了
grid-template-rows: 100px 100px和grid-auto-flow: column→ 第 3 项会被塞进第 1 行第 3 列，但该列宽未定义，结果不可预测 -
grid-auto-flow: dense会打乱 DOM 顺序去填空，但隐式轨道尺寸仍由grid-auto-rows/columns控制，不是自动“聪明适配”
显式轨道写法影响隐式轨道行为
隐式网格是否触发、怎么触发，取决于显式定义的轨道结构：
- 只写了
grid-template-columns没写grid-template-rows→ 新项超出列数时，隐式行被创建，高度由grid-auto-rows决定 - 只写了
grid-template-rows没写grid-template-columns→ 新项超出行数时，隐式列被创建，宽度由grid-auto-columns决定 - 两者都没写 → 所有项堆在第 1 行第 1 列，隐式轨道几乎不生成（除非手动定位到线号 5）
-
grid-template-areas定义了区域但子项数量超过区域格子数 → 多余项进入隐式网格，尺寸仍看grid-auto-rows/columns
gap 不作用于隐式轨道之间的空隙
gap 只控制显式轨道之间的间距，对隐式轨道无效。比如 grid-auto-rows: 80px + gap: 12px，隐式行之间仍是 12px 间隔；但若 grid-auto-rows: auto，内容高矮不一，gap 依然生效，只是视觉上不均匀。
真正要让隐式行看起来整齐，必须靠 grid-auto-rows 统一尺寸，而不是依赖 gap 补救。
隐式网格不是“后备方案”，它是 Grid 布局里最易失控的部分——你得亲手给它定尺子，不然它就按自己想法长。
