grid-template-rows用于定义网格行高，支持px、fr、auto等单位，可结合minmax()和repeat()实现灵活布局，需注意隐式网格由grid-auto-rows控制。
在CSS Grid布局中，grid-template-rows 属性用于定义网格容器中每一行的高度。通过它，你可以精确控制每行的尺寸，从而实现灵活且响应式的页面结构。
基本语法
使用 grid-template-rows 时，你为每一行指定一个高度值，多个值之间用空格分隔：
grid-template-rows: 100px 50px auto;
这表示第一行高100px，第二行为50px，第三行自动填充内容所需高度。
常用单位和取值方式
你可以使用多种单位来设置行高，适应不同布局需求：
立即学习“前端免费学习笔记（深入）”；
- 固定单位：如 px、cm、em 等，适合固定高度场景
- auto：根据内容自动调整高度
- fr 单位：表示可用空间的份数，例如 1fr 就是均分一份
- min-content / max-content：根据最小或最大内容需求决定高度
- minmax()：设定最小和最大范围，比如 minmax(50px, 1fr)
示例：
grid-template-rows: 80px minmax(60px, 1fr) auto;
第一行固定80px，第二行至少60px但可扩展，第三行由内容决定。
实用技巧与常见用法
在实际开发中，合理设置行高有助于构建清晰的界面层次：
- 使用 fr 单位实现“头部固定 + 内容区域自适应”的布局
- 结合 auto-fit 或 auto-fill 配合 repeat() 函数动态生成行
- 利用 minmax() 防止内容溢出或空白过多
比如让两行平均分配剩余空间：
grid-template-rows: 100px 1fr 1fr;
第一行为固定导航栏，下面两行等高伸展。
注意事项
如果定义的行数少于实际网格项所需的行数，多余项会自动放置到隐式网格中（由 grid-auto-rows 控制）。若想完全掌控所有行高，建议同时设置 grid-auto-rows 避免意外布局。
基本上就这些。掌握 grid-template-rows 能让你更自由地控制纵向空间分配，是Grid布局的核心技能之一。不复杂但容易忽略细节。