<p>必须手动设置 grid-auto-rows 和 grid-auto-columns，因隐式轨道默认 auto 会导致高度塌陷、列宽失控；二者分别控制隐式行高与列宽，需配合 grid-auto-flow 使用，且仅影响未被 grid-template-* 显式定义的轨道。</p>
隐式网格的默认大小不能靠浏览器自动处理，必须显式用 grid-auto-rows 和 grid-auto-columns 设置，否则容易出现高度塌陷、列宽失控或内容错位。
为什么需要手动设隐式轨道尺寸
显式网格（由 grid-template-rows/grid-template-columns 定义）之外的内容，浏览器会自动生成隐式行或列来容纳——但这些隐式轨道默认是 auto，即按内容撑开。实际项目中这往往不可控：文字多就拉高，图片大就撑宽，破坏整体节奏。
- 没设
grid-auto-rows时，第3个、第4个子项所在行高度可能各不相同 - 用
grid-column: 5 / 6跳着放元素，没配grid-auto-columns，新增的第4、第5列宽度会随内容乱变 - 搭配
grid-auto-flow: column时，若漏掉grid-auto-columns，所有隐式列都按内容宽度渲染，无法对齐
怎么设才稳定
两个属性分别管隐式行高和列宽，值可以是固定单位、fr、minmax() 等，和显式轨道写法一致：
-
grid-auto-rows: 80px→ 所有隐式行统一 80px 高 -
grid-auto-rows: 1fr→ 隐式行等分剩余空间（需配合明确的容器高度） -
grid-auto-rows: minmax(60px, auto)→ 至少 60px，内容多时可弹性增高 -
grid-auto-columns: 200px→ 新增列一律 200px 宽，适合卡片流式布局
别忘了搭配 grid-auto-flow
grid-auto-flow 不控制尺寸，但决定“往哪补”——它和上面两个属性是铁三角关系：
- 想让新项目横向填满再换行 →
grid-auto-flow: row+grid-auto-rows: 100px - 想实现垂直时间线效果 →
grid-auto-flow: column+grid-auto-columns: 240px - 避免视觉空洞又不想语义错乱 → 别轻易用
dense，多数场景保持默认即可
常见踩坑提醒
隐式轨道只响应“未被显式定义”的部分，所以：
-
grid-template-rows: 100px 100px定义了前两行 → 第3行起才是隐式，grid-auto-rows只影响第3行及之后 -
grid-auto-rows对grid-template-rows里已写的行完全无效 - 媒体查询切换布局时，记得同步更新这三个属性，否则小屏下隐式轨道尺寸可能严重失配
