grid-auto-rows和grid-auto-columns用于控制隐式网格轨道的尺寸，即当子元素超出显式定义的行列时，浏览器自动创建的行高与列宽；默认auto易导致布局错乱，推荐设为minmax()或固定值。
隐式网格不是“设置出来”的，而是浏览器自动创建的——你只需要告诉它怎么生成，它就会在显式网格之外按规则补上。
grid-auto-rows 和 grid-auto-columns 控制隐式轨道大小
当网格项数量超过 grid-template-rows 或 grid-template-columns 定义的轨道数时，浏览器会自动创建额外的行或列，这些就是隐式轨道。它们的尺寸由这两个属性决定：
-
grid-auto-rows决定隐式行的高度（比如100px、minmax(50px, auto)） -
grid-auto-columns决定隐式列的宽度（比如1fr、200px） - 如果不设，默认是
auto，即内容撑开，容易导致高度不一致或布局错乱
grid-auto-flow 控制隐式项的填充方向和算法
这个属性影响新项（未显式定位的项）如何填入隐式网格：
-
grid-auto-flow: row（默认）：按行优先填满，填不满就新开一行 -
grid-auto-flow: column：按列优先填，适合瀑布流式布局 -
grid-auto-flow: dense：启用“密集填充”，会回填前面因跨行/跨列留下的空隙，但可能打乱 DOM 顺序，慎用
常见踩坑：显式定义太少 + 隐式行为没约束 = 布局失控
比如只写了 grid-template-columns: 1fr 1fr，但子元素有 10 个，又没设 grid-auto-rows，结果每行高度都由内容撑开，视觉上参差不齐；再配上 grid-auto-flow: dense，还可能让元素位置和语义顺序脱节。
- 建议显式定义常用行列数，再用
grid-auto-rows统一隐式行高（如minmax(80px, auto)） - 避免无脑加
dense，除非你明确需要紧凑排列且不依赖 DOM 顺序 - 调试时可临时加
outline: 1px solid red到网格项，看清哪些是隐式生成的轨道
隐式网格真正难的不是语法，而是预判——你要想清楚：哪些项会溢出？它们该多高？是否允许换列？这些决定了 grid-auto-rows、grid-auto-columns 和 grid-auto-flow 的组合是否合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
