css布局grid-template-rows控制行高

grid-template-rows用于定义网格行高，支持px、fr、auto等单位，可结合minmax()和repeat()实现灵活布局，需注意隐式网格由grid-auto-rows控制。

在CSS Grid布局中，grid-template-rows 属性用于定义网格容器中每一行的高度。通过它，你可以精确控制每行的尺寸，从而实现灵活且响应式的页面结构。

基本语法

使用 grid-template-rows 时，你为每一行指定一个高度值，多个值之间用空格分隔：

这表示第一行高100px，第二行为50px，第三行自动填充内容所需高度。

常用单位和取值方式

你可以使用多种单位来设置行高，适应不同布局需求：

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

• 固定单位：如 px、cm、em 等，适合固定高度场景
• auto：根据内容自动调整高度
• fr 单位：表示可用空间的份数，例如 1fr 就是均分一份
• min-content / max-content：根据最小或最大内容需求决定高度
• minmax()：设定最小和最大范围，比如 minmax(50px, 1fr)

示例：

第一行固定80px，第二行至少60px但可扩展，第三行由内容决定。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

实用技巧与常见用法

在实际开发中，合理设置行高有助于构建清晰的界面层次：

• 使用 fr 单位实现“头部固定 + 内容区域自适应”的布局
• 结合 auto-fit 或 auto-fill 配合 repeat() 函数动态生成行
• 利用 minmax() 防止内容溢出或空白过多

比如让两行平均分配剩余空间：

第一行为固定导航栏，下面两行等高伸展。

注意事项

如果定义的行数少于实际网格项所需的行数，多余项会自动放置到隐式网格中（由 grid-auto-rows 控制）。若想完全掌控所有行高，建议同时设置 grid-auto-rows 避免意外布局。

基本上就这些。掌握 grid-template-rows 能让你更自由地控制纵向空间分配，是Grid布局的核心技能之一。不复杂但容易忽略细节。

以上就是css布局grid-template-rows控制行高的详细内容，更多请关注php中文网其它相关文章！