grid-auto-columns 和 grid-auto-rows 必须显式设置以统一隐式轨道尺寸，否则默认 auto 导致内容撑开、高度不一致；推荐用 1fr 或固定值，并确保容器有明确宽高约束。
grid-auto-columns 和 grid-auto-rows 必须显式设置
隐式网格轨道（比如你只定义了 3 列，但内容有 5 项，后 2 列就是隐式生成的）默认尺寸是 auto，也就是内容撑开——这正是尺寸不一致的根源。不设它，浏览器就按每个格子的内容自由伸缩。
实操建议：
- 用
grid-auto-columns: 1fr或grid-auto-columns: 200px统一隐式列宽，grid-auto-rows同理 - 如果主网格用
grid-template-columns: repeat(3, 1fr)，但内容超出行数，记得补上grid-auto-rows: 1fr，否则新增行高仍是auto - 避免混用：不要一边写
grid-template-columns设显式列，另一边又漏掉grid-auto-columns，隐式列会悄悄回归内容宽度
fr 单位在隐式轨道中依然有效，但需注意容器尺寸约束
fr 不是魔法，它依赖网格容器有明确的可用空间。如果容器本身宽高未限定（比如父元素是 display: contents 或无高度限制的 flex 项），grid-auto-rows: 1fr 会退化为 auto，结果还是参差不齐。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 网格项高度看起来“忽高忽低”，检查父容器是否设置了
height或min-height - 在
overflow: auto容器里，隐式行高可能被截断或撑不开，此时1fr失效，改用固定值如grid-auto-rows: 80px更可靠 -
fr在隐式轨道中不参与显式轨道的分配计算，它只管“多出来的部分”，所以别指望grid-auto-rows: 1fr跟grid-template-rows: 2fr 1fr对齐
避免 grid-template-areas 暗中干扰隐式轨道
当你用 grid-template-areas 定义布局，但某些区域没覆盖全部格子，浏览器仍会生成隐式轨道放剩余项——而这些轨道完全不受 grid-template-areas 约束，尺寸照旧失控。
使用场景：
- 混合布局（比如头部/侧边栏用命名区域，卡片列表用隐式网格）时，必须单独配
grid-auto-columns/grid-auto-rows -
grid-template-areas中的点（.）只是占位符，不会阻止隐式轨道生成，也不能控制其尺寸 - 若想彻底禁用隐式轨道，可设
grid-auto-columns: none，但这时超出定义范围的内容会被裁剪或溢出，慎用
真正卡住人的地方，往往不是语法写错，而是隐式轨道像影子一样存在却没人给它定规矩——它不报错，只默默按内容撑开，等你发现三张卡片高度不一样才回头找原因。
