grid-template-rows用于定义网格行高，支持px、%、fr、auto等单位，可结合repeat()和minmax()创建灵活布局，如头部60px、主体1fr、底部40px的三行结构。
CSS 中的 grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过多种方式精确控制每行的尺寸，适用于响应式布局和固定结构。
基本语法
grid-template-rows 接受一个或多个用空格分隔的尺寸值，每个值对应一行的高度：
grid-template-rows: 100px 50px auto;
这表示创建三行：第一行高 100px，第二行 50px，第三行自动适应内容。
常用单位和值
你可以使用不同单位来定义行高，灵活应对各种布局需求：
立即学习“前端免费学习笔记（深入）”；
- 像素（px）：固定高度，如 grid-template-rows: 80px 120px
- 百分比（%）：相对于网格容器的高度，如 grid-template-rows: 30% 70%
- fr 单位：弹性比例单位，分配剩余空间，如 grid-template-rows: 1fr 2fr 表示两行按 1:2 分配可用高度
- auto：根据内容自动调整高度
- min-content / max-content：根据最小或最大内容所需空间设置高度
结合 minmax() 和 repeat() 的高级用法
提升灵活性的方式包括使用函数组合：
- grid-template-rows: repeat(3, 100px) —— 创建三行，每行 100px 高
- grid-template-rows: repeat(2, minmax(100px, auto)) —— 两行，最小 100px，可随内容变高
- grid-template-rows: 1fr min-content —— 第一行占剩余空间，第二行仅够容纳内容
实际示例
一个常见的三行布局（头部、主体、底部）：
.grid-container {
display: grid;
grid-template-rows: 60px 1fr 40px;
}
头部固定 60px，主体占满剩余空间，底部 40px。
基本上就这些。合理使用 grid-template-rows 能让你轻松构建清晰的纵向布局结构。