CSSgrid行高设置技巧解析

**CSS grid-template-rows 行高设置详解：打造灵活响应式布局** 想要轻松掌握 CSS Grid 布局？`grid-template-rows` 属性是关键！本文深入解析 `grid-template-rows` 的使用方法，助你精准控制网格行高，构建清晰的纵向布局结构。从基本语法入手，详细讲解 `px`、`%`、`fr`、`auto` 等常用单位的运用，并结合 `minmax()` 和 `repeat()` 函数，解锁更高级的用法。更有实战示例，教你如何利用 `grid-template-rows` 打造常见的头部、主体、底部三行布局，轻松实现响应式和固定结构的页面设计。无论你是新手还是进阶开发者，都能从中受益，提升 CSS Grid 布局技能。

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

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

基本语法

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

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

常用单位和值

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

• 像素（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。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。