grid-auto-rows用于设置网格容器中隐式创建行的高度，当未用grid-template-rows明确定义时生效。其值可为固定值如100px、弹性单位1fr、min-content、max-content或minmax()函数。例如grid-auto-rows: minmax(60px, auto)使每行至少60px高且内容增多时自动扩展，适用于项目数量不确定的动态布局场景。与grid-template-rows不同，后者定义显式网格行高，而grid-auto-rows控制自动生成长行列的高度，提升布局灵活性。
在 CSS Grid 布局中，grid-auto-rows 用于设置网格容器中自动生成的行（隐式创建的行）的高度。当你没有明确使用 grid-template-rows 定义每一行高度时，浏览器会自动创建行，这些行的高度由 grid-auto-rows 控制。
基本语法
grid-auto-rows: track-size;其中 track-size 可以是长度值（如 px、em、fr）、百分比，或关键字（如 auto、min-content、max-content）。
常用取值示例
以下是一些常见的使用方式：
-
固定高度：所有自动生成的行统一为固定高度。
grid-auto-rows: 100px; -
弹性单位（fr）：按比例分配剩余空间。
grid-auto-rows: 1fr;
如果有多个 1fr 行，它们将平均分配可用空间。 -
最小内容高度：行高根据内容最小所需空间调整。
grid-auto-rows: min-content; -
最大内容高度：行高适应内容的最大需求（比如长单词或图片）。
grid-auto-rows: max-content; -
混合使用 minmax()：推荐方式，可设定最小和最大范围。
grid-auto-rows: minmax(80px, auto);
表示每行至少 80px 高，内容更多时自动撑开。
实际应用场景
假设你有一个网格容器，里面项目数量不确定，希望每行自动具有合理高度：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(60px, auto);
gap: 10px;
}
这样，即使没有定义具体有多少行，每个新增的行都会至少有 60px 高，内容超出时自动增高。
与 grid-template-rows 的区别
grid-template-rows 用于明确定义已知行的高度，适用于固定结构；而 grid-auto-rows 管理的是当项目超出预定义行数时，浏览器自动创建的“隐式”行的高度。
基本上就这些。掌握 grid-auto-rows 能让你的网格布局更灵活，尤其适合动态内容场景。
