CSS3 布局 - grid-template-rows 属性

核心知识点

grid-template-rows 属性的语法和基本用法
grid-template-rows 的取值范围和单位
repeat() 函数在行定义中的使用方法
fr 单位在行定义中的应用
grid-template-rows 与其他Grid属性的配合使用

学习目标

掌握 grid-template-rows 属性的语法和取值
理解 repeat() 函数和 fr 单位在行定义中的使用方法
能够创建不同类型的行布局
学会在复杂布局中灵活运用 grid-template-rows 属性

语法解析

grid-template-rows 属性用于定义Grid布局中行的大小和数量。

grid-template-rows: <track-list>;

取值说明

<track-list>：一个或多个轨道大小的列表，用空格分隔
- <length>：具体的长度值，如 px、em、rem 等
- <percentage>：相对于Grid容器高度的百分比值
- <flex>：使用 fr 单位，表示可用空间的比例
- max-content：行高由内容的最大高度决定
- min-content：行高由内容的最小高度决定
- auto：行高由内容决定，或根据其他行的高度自动调整
- repeat()：重复指定的轨道大小模式

repeat() 函数

repeat(<count>, <track-size>);

<count>：重复的次数
<track-size>：轨道的大小，可以是单个值或多个值的列表

代码示例

示例1：使用具体长度值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-template-rows: 具体长度值 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 80px 120px;
            gap: 10px;
            width: 350px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
    </div>
</body>
</html>

效果分析：创建了一个3列2行的Grid布局，行高分别为80px和120px。

示例2：使用fr单位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-template-rows: fr单位 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 2fr;
            gap: 10px;
            width: 100%;
            max-width: 600px;
            height: 300px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #2196F3;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
    </div>
</body>
</html>

效果分析：使用 fr 单位创建自适应高度的Grid布局，第二行的高度是第一行的2倍。

示例3：使用repeat()函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-template-rows: repeat() 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 80px);
            gap: 10px;
            width: 100%;
            max-width: 600px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #FF9800;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
        <div class="item">项目7</div>
        <div class="item">项目8</div>
        <div class="item">项目9</div>
    </div>
</body>
</html>

效果分析：使用 repeat() 函数创建了一个3列3行的Grid布局，每行高度相等。

示例4：混合使用不同单位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-template-rows: 混合单位 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 60px 1fr auto;
            gap: 10px;
            width: 100%;
            max-width: 600px;
            height: 400px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #9C27B0;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .item:last-child {
            background-color: #F44336;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item" colspan="3">头部</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
        <div class="item">项目7</div>
        <div class="item" colspan="3">底部</div>
    </div>
</body>
</html>

效果分析：混合使用 px、fr 和 auto 单位，创建了一个具有固定高度头部、自适应高度内容区和自动高度底部的布局。

布局示意图

grid-template-rows: 80px 120px

+-------------------------+
| [项目1] [项目2] [项目3] | ← 80px
+-------------------------+
| [项目4] [项目5] [项目6] | ← 120px
+-------------------------+

grid-template-rows: 1fr 2fr

+-------------------------+
| [项目1] [项目2] [项目3] | ← 1/3 高度
+-------------------------+
| [项目4] [项目5] [项目6] | ← 2/3 高度
+-------------------------+

grid-template-rows: repeat(3, 80px)

+-------------------------+
| [项目1] [项目2] [项目3] | ← 80px
+-------------------------+
| [项目4] [项目5] [项目6] | ← 80px
+-------------------------+
| [项目7] [项目8] [项目9] | ← 80px
+-------------------------+

grid-template-rows: 60px 1fr auto

+-------------------------+
| [头部]                   | ← 60px
+-------------------------+
| [项目2] [项目3] [项目4] | ← 自适应高度
| [项目5] [项目6] [项目7] |
+-------------------------+
| [底部]                   | ← 自动高度
+-------------------------+

实际应用场景

等高山布局：当需要多个行高度相等时，使用 repeat(n, 1fr) 或固定值
固定高度与自适应混合布局：当需要某些行固定高度，某些行自适应时，混合使用不同单位
响应式布局：当需要在不同屏幕尺寸下调整行高时，结合媒体查询使用 grid-template-rows
内容自适应布局：当需要行高由内容决定时，使用 max-content、min-content 或 auto
页面布局：当需要创建包含头部、内容区和底部的页面布局时，使用 grid-template-rows

与其他Grid属性的配合

grid-template-columns：定义Grid布局中列的大小和数量
grid-template-areas：定义Grid布局中的命名区域
grid-row-gap / gap：定义行之间的间距
align-items：控制Grid项目在行中的对齐方式

代码优化建议

性能考虑：grid-template-rows 在现代浏览器中性能良好，但在复杂布局中应合理使用
浏览器兼容性：所有现代浏览器都支持 grid-template-rows，但在旧版IE中不支持
代码简洁性：对于重复的行高模式，使用 repeat() 函数简化代码
响应式设计：结合媒体查询，在不同屏幕尺寸下调整行高和行数

实践练习

练习1：基础应用

创建一个3列3行的Grid布局，使用 repeat() 函数和固定值，使每行高度相等。

练习2：混合单位布局

创建一个Grid布局，包含：

第一行：固定高度 100px
第二行：自适应高度 1fr
第三行：自动高度 auto

练习3：页面布局

使用Grid布局创建一个简单的页面结构：

头部：固定高度 80px
主内容区：自适应高度 1fr
底部：固定高度 60px

总结

grid-template-rows 属性是CSS3中定义Grid布局行结构的核心属性，通过设置不同的取值，你可以实现：

使用具体长度值创建固定高度的行
使用 fr 单位创建自适应高度的行
使用 repeat() 函数简化重复的行高定义
混合使用不同单位创建复杂的行布局
使用 max-content、min-content 和 auto 创建内容自适应的行

合理使用 grid-template-rows 属性，可以创建各种灵活的Grid布局，满足不同的设计需求。