grid-auto-rows和grid-auto-columns是为隐式网格轨道兜底的尺寸规则，当显式定义的轨道不足时生效；接受单值、空格分隔的多值或repeat()，不支持百分比（父容器无明确尺寸时）和minmax等复杂函数。
grid-auto-rows 和 grid-auto-columns 是什么
它们不是“自动生成行高/列宽”的魔法开关，而是**当显式定义的网格轨道不够用时，为隐式网格轨道兜底的尺寸规则**。比如你写了 grid-template-rows: 100px 200px，但内容多到需要第3行——这第3行就属于“隐式行”，它的高度由 grid-auto-rows 决定。
什么时候必须用 grid-auto-rows/columns
常见于动态内容场景：列表项数量不确定、卡片布局随数据增减、拖拽新增网格项等。不设它，新产生的隐式轨道默认是 auto（即内容撑开），往往导致高度不一致或列宽塌缩。
- 使用
grid-template-rows或grid-template-columns显式定义了部分轨道，但内容超出 - 用了
grid-row-start/grid-column-end等定位属性把项目扔到未声明的轨道上 - 配合
grid-auto-flow: dense做紧凑填充时，隐式轨道更易被触发
值怎么写才不踩坑
grid-auto-rows 和 grid-auto-columns 接受单个值（统一尺寸）或多个用空格分隔的值（循环模式），但**不支持 repeat() 函数以外的函数嵌套，也不能写百分比（除非父容器有明确高度）**。
- 固定值：
grid-auto-rows: 80px—— 所有隐式行高都是 80px - 弹性值：
grid-auto-rows: 1fr—— 注意：仅在网格容器设了grid-template-rows且有足够空间时才生效；否则可能表现异常 - 混合值：
grid-auto-rows: 40px 80px—— 第1个隐式行40px，第2个80px，第3个又回到40px，循环 - 错误写法：
grid-auto-rows: 50%（父容器无高度则无效）、grid-auto-rows: minmax(40px, auto)（语法合法但多数浏览器不支持，实测常退化为auto）
和 grid-template-* 的关系容易混淆
grid-template-rows 定义的是“显式网格”，grid-auto-rows 管的是“隐式网格”，二者互不覆盖。但如果你写了 grid-template-rows: 100px; grid-auto-rows: 200px，然后放3个子项：
立即学习“前端免费学习笔记（深入）”；
- 第1行：显式轨道，高100px
- 第2行：隐式轨道，高200px（
grid-auto-rows生效） - 第3行：也是隐式轨道，同样200px
真正容易被忽略的是：**隐式轨道一旦生成，就无法通过 :nth-child() 或其他选择器单独控制样式；想精细调控，得改用 grid-template-rows 配合 JS 动态重设，或者换用 grid-auto-flow: column 换方向规避
