grid-auto-rows用于控制隐式网格行的高度，解决内容超出预设行数时的布局问题；可设为auto、1fr、固定值或repeat语法，并需配合grid-auto-flow使用。
当 Grid 布局中内容行数超出预设的 grid-template-rows，多余项目会挤在最后一行或溢出——这不是 bug，而是默认行为。解决办法是用 grid-auto-rows 让新增行“自动诞生”，按需分配高度。
grid-auto-rows 控制隐式行的高度
显式网格（通过 grid-template-rows 定义）只管你写出来的那些行；超出部分属于“隐式网格行”，由 grid-auto-rows 决定它们长什么样。
- 设为
auto：行高由内容撑开（最常用） - 设为
1fr：新行参与剩余空间分配（注意：仅在容器有明确高度时才生效） - 设为固定值如
80px：每新增一行都严格等高 - 支持重复语法，比如
grid-auto-rows: repeat(3, 60px) 100px;
别忘了 grid-auto-flow 配合使用
默认 grid-auto-flow: row，新增项从上到下逐行填；如果改成 column，就变成从左到右逐列填——此时 grid-auto-rows 不再起作用，得换用 grid-auto-columns。
常见误操作：只设了 grid-auto-rows 却把 grid-auto-flow 改成 column，结果新增项不生成新行也不报错，只是“消失”在视觉之外。
避免隐式行塌陷的两个细节
即使写了 grid-auto-rows: auto，有时新行看起来还是“没高度”，原因通常是：
- 子项没内容、没内边距、没最小高度（
min-height），导致auto算出来是 0 - 父容器没设置
display: grid或遗漏grid-template-columns（列没定义，整个网格可能无法正常触发隐式行生成）
建议加一句 min-height: 1px 到子项，或给 grid-auto-rows 换成 minmax(min-content, auto) 更稳妥。
基本上就这些。grid-auto-rows 不是万能扩容开关，但它让 Grid 真正具备了“内容驱动布局”的弹性。用对了，增删列表项、动态卡片流都不用改 CSS。
