根本原因是未显式设置grid-auto-columns或grid-auto-rows，导致隐式轨道默认采用auto尺寸，依内容自由伸缩而造成高度/宽度不一致；必须显式定义二者并配合容器明确宽高约束才能统一隐式轨道尺寸。
隐式轨道尺寸不一致，根本原因是没设 grid-auto-columns 或 grid-auto-rows
显式定义的列（如 grid-template-columns: 1fr 1fr）只管前几列，后面多出来的列全靠隐式轨道撑着。而默认值是 auto——也就是每个格子按自己内容高度/宽度自由伸缩，结果就是卡片忽高忽矮、列宽参差不齐。这不是 bug，是浏览器按规范走的默认行为。
grid-auto-columns 和 grid-auto-rows 只对“自动冒出”的轨道生效
它们完全不影响你用 grid-template-columns 或 grid-template-rows 显式写的那些轨道。只管两件事：内容超出显式范围时新生成的行/列，以及被显式定位到未定义行列（比如 grid-column: 5 但只定义了 3 列）时补出的轨道。
-
grid-auto-columns: 200px→ 所有隐式列宽固定为 200px -
grid-auto-rows: 1fr→ 隐式行高按剩余空间等分，但前提是容器本身有明确高度约束（比如设置了height或min-height） -
grid-auto-rows: minmax(60px, auto)→ 大部分浏览器不支持，实测常退化为auto，慎用 - 写多个值如
grid-auto-rows: 80px 120px会循环应用：第1个隐式行80px，第2个120px，第3个又回到80px
常见踩坑点：fr 单位在隐式轨道里不是万能的
1fr 看起来很美，但它依赖网格容器有确定的可用空间。如果父容器没设 height、max-height，或处于 display: contents / 无约束的 flex 项中，grid-auto-rows: 1fr 就会悄悄退化成 auto，高度还是参差不齐。
- 在
overflow: auto容器里，1fr很可能撑不开内容，改用固定值更稳，比如grid-auto-rows: 80px -
grid-auto-rows: 1fr不会和grid-template-rows: 2fr 1fr对齐——它只负责“多出来的那部分”，不参与显式轨道的分配逻辑 - 用了
grid-template-areas也不代表隐式轨道消失；没被区域覆盖的项目照样进隐式轨道，尺寸仍需单独配grid-auto-rows
彻底禁用隐式轨道？可以但要小心
设 grid-auto-columns: none 或 grid-auto-rows: none 确实能阻止新轨道生成，但超出显式范围的内容不会自动换行，而是被裁剪或溢出容器。这不是“隐藏”，是“丢弃”——除非你明确想截断内容，否则别这么干。
真正难处理的是动态列表场景：卡片数量不确定、拖拽新增项、响应式列数变化……这时候隐式轨道不是问题，而是必须面对的机制。关键不是绕开它，而是提前用 grid-auto-rows 和 grid-auto-columns 把它的行为定死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
