grid-template-rows用于定义网格行高，支持像素、百分比、fr、auto等单位；2. 可用固定值、相对单位或fr分配空间，结合repeat简化重复设置，实现灵活布局。
CSS 的 grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过多种方式灵活设置行高，满足不同布局需求。
固定高度设置
可以直接为每一行指定具体的像素值或其他绝对单位。
.container {
display: grid;
grid-template-rows: 100px 50px 80px;
}
上面代码创建了三行，高度分别为 100px、50px 和 80px。
使用相对单位
可以用百分比（%）、em、rem 等相对单位来设置行高，使布局更具响应性。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-rows: 20% 60% 20%;
}
整个网格高度基于容器，三行分别占 20%、60%、20%。
fr 单位分配剩余空间
fr（fraction）单位表示可用空间的份数，非常适合弹性布局。
.container {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
}
总共有 4 份，第二行占 2 份，第一和第三行各占 1 份，自动均分容器高度。
结合 auto 关键字
使用 auto 可让某一行根据内容自动调整高度。
.container {
display: grid;
grid-template-rows: auto 1fr auto;
}
首尾行根据内容自适应，中间行填满剩余空间，适合页头、主体、页脚布局。
重复行高设置（repeat）
当多行需要相同高度时，用 repeat() 更简洁。
.container {
grid-template-rows: repeat(3, 100px);
}
生成三行，每行 100px 高。
基本上就这些常用方法。根据实际布局选择合适的单位组合，能高效实现各种行高控制。
