grid-auto-rows和grid-auto-columns分别控制隐式行、列轨道尺寸，仅对自动创建的轨道生效，不影响显式定义的grid-template-rows/columns；其值支持1fr、auto、minmax()等，但不支持repeat()；grid-auto-flow决定哪个属性起效：row时由grid-auto-rows控制，column时由grid-auto-columns控制。
grid-auto-rows 和 grid-auto-columns 分别控制隐式行轨道和列轨道的尺寸
当 Grid 容器中子元素超出显式定义的网格（即 grid-template-rows 或 grid-template-columns 范围）时，浏览器会自动生成额外的“隐式轨道”——这些轨道不由你直接声明，但尺寸由 grid-auto-rows 和 grid-auto-columns 决定。
简单说：grid-auto-rows 管所有**自动创建的行轨道**高度，grid-auto-columns 管所有**自动创建的列轨道**宽度。它们只对隐式轨道生效，对 grid-template-rows 里写的那些显式行毫无影响。
常见错误：把 grid-auto-* 当成默认行高/列宽来用
很多人误以为设了 grid-auto-rows: 100px 就能让所有行（包括显式定义的）都高 100px，结果发现 grid-template-rows: 50px 200px 完全没被覆盖——这是对的，也是设计如此。
-
grid-template-rows和grid-template-columns定义的是“你明确要的轨道”，优先级最高 -
grid-auto-rows和grid-auto-columns只兜底“你没写但浏览器不得不加的轨道” - 如果用了
grid-template-areas，且某区域跨到未声明的行列，那些行列也属于隐式轨道，受这两个属性控制 - 值可以是固定长度（
1fr、auto、minmax(100px, auto)都合法），但不能是repeat()—— 浏览器不支持在隐式轨道中重复模式
性能与兼容性注意点
隐式轨道本身不会触发重排，但若 grid-auto-rows 设为 auto 或含 min-content/max-content，内容尺寸变化可能引发频繁重计算，尤其在动态增删子项时。
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari（≤15.4）对
minmax()在grid-auto-rows中的支持不完整，建议降级为固定值或auto - 如果所有子项都用
grid-row/grid-column显式定位，且没超出范围，grid-auto-rows根本不会起作用——它只在“需要生成新轨道”时才介入 - 设为
0或0px不会让隐式轨道消失，而是让其尺寸为零，可能导致内容被裁剪，慎用
一个容易被忽略的边界情况：grid-auto-flow 影响哪个属性生效
grid-auto-flow 的值决定了隐式轨道的创建方向，进而决定哪个 grid-auto-* 属性实际起效：
-
grid-auto-flow: row（默认）→ 新增项目按行排列 → 多出来的行由grid-auto-rows控制，列数不变 →grid-auto-columns不触发 -
grid-auto-flow: column→ 新增项目按列排列 → 多出来的列由grid-auto-columns控制，行数不变 →grid-auto-rows不触发 -
grid-auto-flow: dense不改变轨道生成逻辑，只影响已生成轨道中的填充顺序，不影响grid-auto-*的尺寸行为
真正容易漏掉的是：当你改了 grid-auto-flow 却忘了同步检查对应的那个 grid-auto-* 是否还符合预期——比如从 row 切到 column 后，原来靠 grid-auto-rows 控制的高度就完全失效了。
