grid-auto-rows用于设置Grid布局中隐式生成行的高度，当内容超出显式定义的行时生效。例如grid-auto-rows: 80px使自动生成的行高为80px；与grid-template-rows（定义显式行）不同，它控制自动创建的隐式轨道；可配合fr单位实现剩余空间的灵活分配，适用于动态内容布局。
在CSS Grid布局中，auto-rows 属性并不是一个独立的CSS属性，而是 grid-auto-rows 的简称。它用于定义Grid容器中**自动生成的隐式行轨道（implicit grid rows）的高度**。当你放置的内容超出了显式定义的网格行时，浏览器会自动创建额外的行，这些行的高度由 grid-auto-rows 控制。
grid-auto-rows 基本语法
grid-auto-rows:
其中
常见取值示例：
-
grid-auto-rows: auto;— 行高根据内容自动调整 -
grid-auto-rows: 100px;— 所有隐式行高度为100px -
grid-auto-rows: 1fr;— 隐式行均分剩余空间 -
grid-auto-rows: min-content;— 行高等于内容最小高度 -
grid-auto-rows: max-content;— 行高等于内容最大高度
何时会生成隐式行？
当使用 grid-row 或 grid-area 将子元素定位到未显式定义的行位置时，Grid容器会自动创建新的行轨道，这些就是“隐式行”。
例如：
.container {
display: grid;
grid-template-rows: 100px; /* 只定义了一行 */
grid-auto-rows: 80px; /* 隐式行高度设为80px */
}
.item {
grid-row: 3 / 4; / 放置到第3行，但前两行未定义 /
}
此时，第2行和第3行会被自动创建，它们的高度将采用 grid-auto-rows: 80px 的设定。
与 grid-template-rows 的区别
grid-template-rows 定义的是显式网格中的行高，即你手动规划的行。
grid-auto-rows 则控制那些因内容溢出或定位需要而自动生成的行。
举个实用场景：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px; /* 第1行固定100px */
grid-auto-rows: 60px; /* 后续自动生成的行60px */
}
如果第一个项目放在第1行，第二个项目放在第5行，那么第2、3、4行将被自动创建，每行高60px。
结合 fr 单位实现灵活布局
使用 fr 单位可以让隐式行按比例分配可用空间。
.grid {
display: grid;
height: 400px;
grid-template-rows: 100px;
grid-auto-rows: 1fr; /* 剩余空间平均分配给隐式行 */
}
假设共生成3个隐式行，它们将共享剩下的300px，每行约100px高。
基本上就这些。掌握 grid-auto-rows 能让你更灵活地处理动态内容或复杂定位场景下的Grid行高控制，避免意外空白或溢出问题。
