如何通过css grid-template-rows定义行高

grid-template-rows用于定义网格行高，支持px、%、fr、auto等单位，可结合repeat()和minmax()创建灵活布局，如头部60px、主体1fr、底部40px的三行结构。

CSS 中的 grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过多种方式精确控制每行的尺寸，适用于响应式布局和固定结构。

基本语法

grid-template-rows 接受一个或多个用空格分隔的尺寸值，每个值对应一行的高度：

这表示创建三行：第一行高 100px，第二行 50px，第三行自动适应内容。

常用单位和值

你可以使用不同单位来定义行高，灵活应对各种布局需求：

立即学习“前端免费学习笔记（深入）”；

通义视频

通义万相AI视频生成工具

70

查看详情

• 像素（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 —— 第一行占剩余空间，第二行仅够容纳内容

实际示例

一个常见的三行布局（头部、主体、底部）：

头部固定 60px，主体占满剩余空间，底部 40px。

以上就是如何通过css grid-template-rows定义行高的详细内容，更多请关注php中文网其它相关文章！