grid-template-rows用于定义网格行高，支持px、%、auto、fr等单位，可使用repeat()简化重复值，如60px 1fr 40px实现固定与自适应混合布局。
在 CSS Grid 布局中，grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过它精确控制每行的尺寸，适应内容或固定布局需求。
基本语法
使用 grid-template-rows 时，为每一行指定一个高度值，多个值用空格分隔：
grid-template-rows: 100px 50px auto;这表示第一行高 100px，第二行为 50px，第三行根据内容自动调整。
常用单位和值
你可以使用多种单位来设置行高：
立即学习“前端免费学习笔记（深入）”；
- 像素（px）：固定高度，适合精确控制
- 百分比（%）：相对于网格容器的高度
- auto：根据内容自动调整高度
- fr 单位：按比例分配剩余空间，比如 1fr、2fr
- min-content / max-content：根据最小或最大内容所需空间设定高度
实际示例
假设你有一个三行布局，顶部导航栏固定 60px，中间内容区域占满剩余空间，底部固定 40px：
.container {display: grid;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
}
这里 1fr 让中间行自动填充除去顶部和底部后的所有可用高度。
重复和紧凑写法
如果有多行相同高度，可以用 repeat() 简化：
grid-template-rows: repeat(3, 100px);等同于：100px 100px 100px
也可以混合使用，例如：
grid-template-rows: 50px repeat(2, 1fr) 60px;表示第一行 50px，接下来两行各占 1fr，最后一行 60px。
基本上就这些。合理使用 grid-template-rows 能让你轻松实现灵活且响应式的行高控制。不复杂但容易忽略细节，比如容器是否有明确高度，否则 fr 单位可能无法正确计算。
