CSS3 布局 - grid-row-end 属性

核心知识点

grid-row-end 属性的语法和基本用法
取值范围和单位说明
与其他Grid定位属性的关系
实际应用场景和最佳实践

学习目标

掌握 grid-row-end 属性的语法和取值
理解如何使用 grid-row-end 控制Grid项目在行方向上的结束位置
能够在实际项目中灵活运用 grid-row-end 属性
了解 grid-row-end 与其他Grid属性的配合使用

语法解析

grid-row-end 属性用于指定Grid项目在行方向上的结束位置，通过网格线的编号或名称来定位。

grid-row-end: <grid-line>;

取值说明

<grid-line>：可以是以下值之一：
- 数字：网格线的编号，从1开始
- 名称：通过 grid-template-rows 定义的网格线名称
- **span **：表示项目跨越的行数
- auto：默认值，由Grid布局自动决定结束位置

工作原理

Grid布局会在行方向上创建一系列的网格线，从1开始编号
grid-row-end 指定了Grid项目到哪条网格线结束
配合 grid-row-start 属性，可以控制Grid项目在行方向上的跨度

代码示例

示例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-row-end: 基本用法 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            border: 2px solid #333;
            padding: 10px;
            box-sizing: border-box;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .item1 {
            grid-row-start: 1;
            grid-row-end: 3;
        }
        .item2 {
            grid-row-start: 2;
            grid-row-end: 4;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">项目1（到第3条网格线结束）</div>
        <div class="item item2">项目2（到第4条网格线结束）</div>
    </div>
</body>
</html>

效果分析：项目1从第1条网格线开始，到第3条网格线结束，跨越2行；项目2从第2条网格线开始，到第4条网格线结束，跨越2行。

示例2：使用span关键字

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-row-end: 使用span关键字 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            border: 2px solid #333;
            padding: 10px;
            box-sizing: border-box;
        }
        .item {
            background-color: #2196F3;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .item1 {
            grid-row-end: span 2;
        }
        .item2 {
            grid-row-end: span 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">项目1（跨越2行）</div>
        <div class="item item2">项目2（跨越3行）</div>
    </div>
</body>
</html>

效果分析：项目1跨越2行，项目2跨越3行。

示例3：使用命名网格线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-row-end: 使用命名网格线 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: [row1-start] 100px [row2-start] 100px [row3-start] 100px [row3-end];
            gap: 10px;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            border: 2px solid #333;
            padding: 10px;
            box-sizing: border-box;
        }
        .item {
            background-color: #FF9800;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .item1 {
            grid-row-start: row1-start;
            grid-row-end: row3-start;
        }
        .item2 {
            grid-row-start: row2-start;
            grid-row-end: row3-end;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">项目1（到row3-start结束）</div>
        <div class="item item2">项目2（到row3-end结束）</div>
    </div>
</body>
</html>

效果分析：使用命名网格线来定位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-row-end: 复杂布局 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 100px 100px 100px;
            gap: 10px;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            border: 2px solid #333;
            padding: 10px;
            box-sizing: border-box;
        }
        .item {
            background-color: #9C27B0;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .header {
            grid-column-start: 1;
            grid-column-end: 5;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        .sidebar {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        .main {
            grid-column-start: 2;
            grid-column-end: 5;
            grid-row-start: 2;
            grid-row-end: 3;
        }
        .footer {
            grid-column-start: 2;
            grid-column-end: 5;
            grid-row-start: 3;
            grid-row-end: 4;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item header">头部</div>
        <div class="item sidebar">侧边栏</div>
        <div class="item main">主内容</div>
        <div class="item footer">底部</div>
    </div>
</body>
</html>

效果分析：使用 grid-row-end 和其他Grid属性创建了一个包含头部、侧边栏、主内容和底部的复杂布局。

布局示意图

网格线编号示意图

    |       |
1   +-------+
    |       |
2   +-------+
    |       |
3   +-------+
    |       |
4   +-------+

使用grid-row-end定位示例

    |       |
1   +-------+
    |   1       1   |
2   +-------+
    |   2       2       2   |
3   +-------+
    |       |
4   +-------+

实际应用场景

不规则网格布局：当需要创建不规则的网格布局时，使用 grid-row-end 精确定位项目的结束位置
响应式布局：在媒体查询中调整 grid-row-end 的值，以适应不同屏幕尺寸
复杂页面布局：在包含多个区域的页面布局中，使用 grid-row-end 控制区域的大小
卡片布局：当需要创建具有不同高度的卡片布局时，使用 grid-row-end 控制卡片的大小

与其他Grid属性的配合

grid-row-start：控制Grid项目在行方向上的起始位置
grid-row：grid-row-start 和 grid-row-end 的简写属性
grid-column-start：控制Grid项目在列方向上的起始位置
grid-column-end：控制Grid项目在列方向上的结束位置
grid-column：grid-column-start 和 grid-column-end 的简写属性
grid-area：同时设置 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 的简写属性

代码优化建议

使用简写属性：对于同时需要设置 grid-row-start 和 grid-row-end 的情况，建议使用 grid-row 简写属性
使用命名网格线：对于复杂的Grid布局，使用命名网格线可以提高代码的可读性和可维护性
响应式设计：在媒体查询中调整 grid-row-end 的值，以适应不同屏幕尺寸
避免过度使用：对于简单的Grid布局，使用 grid-template-areas 可能更加直观

实践练习

练习1：基础应用

创建一个2列3行的Grid布局，使用 grid-row-end 使项目1到第3条网格线结束，项目2到第4条网格线结束。

练习2：使用span关键字

创建一个2列3行的Grid布局，使用 grid-row-end: span 2 使项目1跨越2行，使用 grid-row-end: span 3 使项目2跨越3行。

练习3：使用命名网格线

创建一个2列3行的Grid布局，使用命名网格线，然后使用这些名称来定位Grid项目的结束位置。

练习4：复杂布局

创建一个包含头部、侧边栏、主内容和底部的复杂布局，使用 grid-row-end 和其他Grid属性控制各区域的大小和位置。

总结

grid-row-end 属性是CSS3中控制Grid项目行结束位置的重要工具，通过设置合适的网格线，你可以：

精确定位Grid项目在行方向上的结束位置
与 grid-row-start 配合使用，控制Grid项目在行方向上的跨度
使用命名网格线提高代码的可读性和可维护性
在响应式设计中调整项目的大小以适应不同屏幕尺寸
创建复杂的不规则网格布局

合理使用 grid-row-end 属性，可以使Grid布局更加灵活和强大，满足各种复杂的布局需求。