grid-template-rows 用于定义网格容器的行高，支持固定值、fr、百分比、auto、minmax() 等；fr 按比例分配剩余空间，minmax() 实现弹性范围，需注意父容器高度、隐式行及 repeat() 简写用法。
grid-template-rows 用于定义 CSS Grid 布局中网格容器的行高（即每行的高度），支持固定值、弹性单位（fr）、百分比、auto、minmax() 等多种方式，灵活控制行高分配与响应行为。
用固定值和关键词设置明确高度
可直接指定像素、em、rem 或使用 auto、min-content、max-content 等关键词：
-
grid-template-rows: 100px 200px auto;—— 第一行 100px，第二行 200px，第三行根据内容自适应高度 -
grid-template-rows: min-content 1fr max-content;—— 首行尽量小，中间行占剩余空间，末行按最大内容撑开
用 fr 单位实现比例分配
fr（fraction）代表“可用空间的等分份额”，是设置比例的核心单位。所有 fr 行按数值比例分配剩余空间（扣除固定高度后的空间）：
-
grid-template-rows: 1fr 2fr 1fr;—— 三行按 1:2:1 比例分配剩余空间 -
grid-template-rows: 50px 1fr 2fr;—— 先预留 50px 给第一行，剩余空间按 1:2 分给后两行
结合 minmax() 实现响应式弹性行高
minmax(min, max) 让某行在设定范围内自适应，常配合 fr 或 auto 使用：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-rows: minmax(60px, auto) 1fr minmax(100px, 200px);—— 第一行至少 60px、最多由内容决定；第二行弹性占剩余空间；第三行在 100–200px 间伸缩 -
grid-template-rows: repeat(3, minmax(80px, 1fr));—— 创建 3 行，每行最小 80px，超出部分可均分剩余空间
注意点与常见误区
实际使用中需留意：
- 未设置
grid-template-rows时，网格默认只有 1 行（隐式行靠grid-auto-rows控制） -
fr不适用于绝对尺寸上下文（如嵌入非伸缩容器中），需确保父容器有明确高度或能撑开 - 百分比行高（如
50%）需依赖网格容器的明确高度，否则视为auto - 多行定义可配合
repeat()简写，例如repeat(4, 1fr)等价于1fr 1fr 1fr 1fr
