Untitled

CSS3 布局 - grid-row shorthand 属性教程

什么是 grid-row 属性？

grid-row 是 CSS Grid 布局中的简写属性，用于同时设置网格项目的 grid-row-start 和 grid-row-end 值。它允许您在一个声明中定义网格项目在垂直方向上的起始和结束位置，使代码更加简洁。

语法

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

其中：

<start-line>: 定义网格项目的起始行线（可以是数字、名称或关键字）
<end-line>: 定义网格项目的结束行线（可以是数字、名称或关键字）

取值说明

取值类型	描述	示例
数字	使用网格线编号	`grid-row: 1 / 3;`
名称	使用命名的网格线	`grid-row: header-start / main-start;`
关键字	使用特殊关键字	`grid-row: 1 / span 2;`
auto	自动定位	`grid-row: auto / auto;`

代码示例

示例 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 属性示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 100px 100px 100px 100px;
            grid-gap: 10px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .grid-item {
            padding: 20px;
            text-align: center;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
        }
        .item1 {
            grid-row: 1 / 3; /* 从第1条线开始，到第3条线结束，跨越2行 */
        }
        .item2 {
            grid-row: 3 / 5; /* 从第3条线开始，到第5条线结束，跨越2行 */
        }
        .item3 {
            grid-row: 1 / 2; /* 从第1条线开始，到第2条线结束，跨越1行 */
        }
        .item4 {
            grid-row: 2 / 5; /* 从第2条线开始，到第5条线结束，跨越3行 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">项目 1 (跨越 2 行)</div>
        <div class="grid-item item2">项目 2 (跨越 2 行)</div>
        <div class="grid-item item3">项目 3 (跨越 1 行)</div>
        <div class="grid-item item4">项目 4 (跨越 3 行)</div>
    </div>
</body>
</html>

示例 2：使用命名网格线

<!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 命名网格线示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: [header-start] 100px [header-end main-start] 200px [main-end footer-start] 100px [footer-end];
            grid-gap: 10px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .grid-item {
            padding: 20px;
            text-align: center;
            background-color: #2196F3;
            color: white;
            border-radius: 5px;
        }
        .header {
            grid-row: header-start / header-end;
            grid-column: 1 / -1;
        }
        .main {
            grid-row: main-start / main-end;
            grid-column: 1 / -1;
        }
        .footer {
            grid-row: footer-start / footer-end;
            grid-column: 1 / -1;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item header">头部区域</div>
        <div class="grid-item main">主内容区域</div>
        <div class="grid-item footer">页脚区域</div>
    </div>
</body>
</html>

示例 3：使用 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 span 示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 100px 100px 100px 100px;
            grid-gap: 10px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .grid-item {
            padding: 20px;
            text-align: center;
            background-color: #ff9800;
            color: white;
            border-radius: 5px;
        }
        .item1 {
            grid-row: 1 / span 2; /* 从第1条线开始，跨越2行 */
        }
        .item2 {
            grid-row: span 3 / 5; /* 跨越3行，到第5条线结束 */
        }
        .item3 {
            grid-row: span 2; /* 自动定位，跨越2行 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">项目 1 (跨越 2 行)</div>
        <div class="grid-item item2">项目 2 (跨越 3 行)</div>
        <div class="grid-item item3">项目 3 (跨越 2 行)</div>
        <div class="grid-item">项目 4</div>
        <div class="grid-item">项目 5</div>
    </div>
</body>
</html>

布局图示

以下是 grid-row 属性的布局示意图：

┌─────────────────────────────────────────────┐
│                     Grid                    │
├─────────────────────────────────────────────┤
│                                             │
│                  第 1 行                    │
│                                             │
├─────────────────────────────────────────────┤ ← 行线 1
│                                             │
│                  第 2 行                    │
│                                             │
├─────────────────────────────────────────────┤ ← 行线 2
│                                             │
│                  第 3 行                    │
│                                             │
├─────────────────────────────────────────────┤ ← 行线 3
│                                             │
│                  第 4 行                    │
│                                             │
├─────────────────────────────────────────────┤ ← 行线 4

当使用 grid-row: 1 / 3; 时，项目会占据从第1条行线到第3条行线之间的区域，跨越2行。

实际应用场景

场景 1：创建垂直方向的响应式布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直响应式布局示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto 1fr auto;
            min-height: 100vh;
        }
        .header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .navigation {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
        }
        .navigation ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }
        .main {
            padding: 20px;
            background-color: #f4f4f4;
        }
        .footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        /* 响应式调整 */
        @media (min-width: 768px) {
            .container {
                grid-template-columns: 200px 1fr;
                grid-template-rows: auto 1fr auto;
            }
            .header {
                grid-column: 1 / -1;
                grid-row: 1 / 2;
            }
            .navigation {
                grid-column: 1 / 2;
                grid-row: 2 / 3;
            }
            .navigation ul {
                flex-direction: column;
                align-items: center;
            }
            .main {
                grid-column: 2 / 3;
                grid-row: 2 / 3;
            }
            .footer {
                grid-column: 1 / -1;
                grid-row: 3 / 4;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">网站标题</div>
        <div class="navigation">
            <ul>
                <li>首页</li>
                <li>关于我们</li>
                <li>产品</li>
                <li>联系我们</li>
            </ul>
        </div>
        <div class="main">
            <h2>主内容区域</h2>
            <p>这里是网站的主要内容...</p>
            <p>更多内容...</p>
        </div>
        <div class="footer">版权所有 © 2023</div>
    </div>
</body>
</html>

场景 2：创建垂直方向的卡片布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直卡片布局示例</title>
    <style>
        .card {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr auto;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
            margin: 20px;
            max-width: 400px;
        }
        .card-header {
            background-color: #3498db;
            color: white;
            padding: 15px;
        }
        .card-body {
            padding: 15px;
            background-color: white;
        }
        .card-footer {
            background-color: #f8f9fa;
            padding: 15px;
            border-top: 1px solid #e9ecef;
        }
        .card.featured {
            grid-template-rows: auto 2fr auto; /* 特色卡片内容区域更高 */
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-header">标准卡片</div>
        <div class="card-body">
            <h3>产品名称</h3>
            <p>这是一个标准卡片，包含基本信息和操作按钮。</p>
        </div>
        <div class="card-footer">
            <button>了解更多</button>
        </div>
    </div>
    
    <div class="card featured">
        <div class="card-header">特色卡片</div>
        <div class="card-body">
            <h3>特色产品</h3>
            <p>这是一个特色卡片，包含更多详细信息和图片展示。</p>
            <p>特色卡片的内容区域更大，可以容纳更多信息。</p>
        </div>
        <div class="card-footer">
            <button>立即购买</button>
        </div>
    </div>
</body>
</html>

浏览器兼容性

浏览器	支持版本
Chrome	57+
Firefox	52+
Safari	10.1+
Edge	16+
IE	不支持

总结

grid-row 简写属性是 CSS Grid 布局中非常实用的工具，它允许您：

在一个声明中同时设置网格项目的起始和结束行位置
使用数字、命名网格线或关键字来定义位置
通过 span 关键字轻松指定项目跨越的行数
创建复杂的垂直方向布局，适应不同内容需求
编写更简洁、更易维护的代码

练习作业

基础练习：创建一个 2x4 的网格布局，使用 grid-row 属性让第一个项目跨越前两行。
进阶练习：创建一个垂直方向的响应式布局，包含头部、导航、主内容和页脚，使用 grid-row 属性实现不同屏幕尺寸的布局调整。
挑战练习：创建一个产品详情页面，使用 grid-row 属性实现产品信息、图片和评论区域的垂直布局，并确保在不同设备上都能良好显示。

扩展阅读

通过本教程，您应该已经掌握了 grid-row 简写属性的使用方法，能够在 Grid 布局中灵活控制项目的垂直位置和跨度。结合其他 Grid 属性，您可以创建出更加复杂和美观的网页布局。