grid-template-rows 是定义 grid 容器显式行数与各行高度的核心属性，值用空格分隔，支持 px、%、fr、auto、minmax()、repeat() 等，缺省则退化为单行布局。
grid-template-rows 是定义 Grid 容器显式行高的核心属性，它直接决定网格有多少行、每行多高。不写这个属性，Grid 就不会真正“画出”行线——所有子元素会堆在第一行左上角，看起来和普通流式布局没区别。
grid-template-rows 的基本写法
值用空格分隔，每个值对应一行的高度：
.container {
display: grid;
grid-template-rows: 100px 200px 80px; /* 三行：高分别为 100px、200px、80px */
}
- 有几个值，就创建几行；
- 值可以是固定单位（px、em、rpx）、百分比、fr、auto 或函数（如 minmax）；
- 行高只作用于显式定义的行，超出部分由隐式行（由
grid-auto-rows控制）补上。
常用取值类型与实际效果
-
固定像素值
适合高度确定的布局，比如顶部导航栏 + 内容区 + 底部：grid-template-rows: 60px 1fr 40px;
-
fr 单位（弹性比例）
1fr表示“剩余可用空间的一份”，多fr值按比例分配：grid-template-rows: 1fr 2fr 1fr; /* 三行，比例为 1:2:1 */
-
百分比
相对于网格容器的高度计算（前提是容器有明确高度）：height: 400px; grid-template-rows: 25% 50% 25%; /* 各为 100px、200px、100px */
-
auto
让该行高度由内容撑开，常用于文字或图片区域：grid-template-rows: 80px auto 60px; /* 中间行自适应 */
-
repeat() 函数
避免重复写相同值，支持循环次数或自动填充：grid-template-rows: repeat(3, 100px); /* 等价于 100px 100px 100px */ grid-template-rows: repeat(2, 50px 100px); /* 50px 100px 50px 100px */ grid-template-rows: repeat(auto-fit, minmax(80px, 1fr))); /* 响应式行高，最小 80px，填不满时自动收缩 */
-
minmax() 组合
设定行高的上下限，配合repeat()更灵活：grid-template-rows: minmax(60px, 100px); /* 至少 60px，最多 100px */ grid-template-rows: repeat(3, minmax(50px, 1fr)); /* 每行都在 50px 和等分空间之间自适应 */
容易踩坑的几个点
- 容器必须有明确高度（或内容撑高），否则百分比和
fr可能无效； -
auto和fr混用要小心：1fr auto会让auto行占满剩余空间，失去预期比例； - 漏写
grid-template-rows不等于“自动按内容分行”，而是退化成单行布局； - 如果用了
grid-template-areas，行数必须和grid-template-rows的值数量一致，否则区域模板失效； - 微信小程序中单位常用
rpx，写法一样：grid-template-rows: 100rpx 200rpx。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
