Untitled

CSS3 布局 - grid-area 属性教程

什么是 grid-area 属性？

grid-area 是 CSS Grid 布局中的一个多功能属性，它有两种主要用途：

作为简写属性：同时设置网格项目的 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 值
作为命名属性：为网格项目分配一个名称，以便在 grid-template-areas 中引用

语法

作为简写属性

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

作为命名属性

grid-area: <area-name>;

取值说明

取值类型	描述	示例
数字	使用网格线编号	`grid-area: 1 / 2 / 3 / 4;`
名称	使用命名的网格线	`grid-area: header-start / sidebar-start / header-end / content-end;`
关键字	使用特殊关键字	`grid-area: 1 / 2 / span 2 / span 3;`
字符串	为项目分配区域名称	`grid-area: header;`
auto	自动定位	`grid-area: auto / auto / 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-area 简写属性示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 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-area: 1 / 1 / 3 / 3; /* 行开始:1, 列开始:1, 行结束:3, 列结束:3 */
        }
        .item2 {
            grid-area: 1 / 3 / 2 / 5; /* 行开始:1, 列开始:3, 行结束:2, 列结束:5 */
        }
        .item3 {
            grid-area: 2 / 3 / 4 / 4; /* 行开始:2, 列开始:3, 行结束:4, 列结束:4 */
        }
        .item4 {
            grid-area: 3 / 1 / 5 / 2; /* 行开始:3, 列开始:1, 行结束:5, 列结束:2 */
        }
        .item5 {
            grid-area: 3 / 2 / 5 / 5; /* 行开始:3, 列开始:2, 行结束:5, 列结束:5 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">项目 1</div>
        <div class="grid-item item2">项目 2</div>
        <div class="grid-item item3">项目 3</div>
        <div class="grid-item item4">项目 4</div>
        <div class="grid-item item5">项目 5</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-area 命名属性示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 200px 1fr;
            grid-template-rows: 100px 1fr 100px;
            grid-template-areas:
                "header header"
                "sidebar content"
                "footer footer";
            grid-gap: 10px;
            padding: 20px;
            background-color: #f0f0f0;
            height: 100vh;
        }
        .grid-item {
            padding: 20px;
            text-align: center;
            border-radius: 5px;
        }
        .header {
            grid-area: header; /* 引用 header 区域 */
            background-color: #333;
            color: white;
        }
        .sidebar {
            grid-area: sidebar; /* 引用 sidebar 区域 */
            background-color: #2196F3;
            color: white;
        }
        .content {
            grid-area: content; /* 引用 content 区域 */
            background-color: white;
            color: #333;
        }
        .footer {
            grid-area: footer; /* 引用 footer 区域 */
            background-color: #333;
            color: white;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item header">头部区域</div>
        <div class="grid-item sidebar">侧边栏</div>
        <div class="grid-item content">主内容区域</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-area span 示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 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-area: 1 / 1 / span 2 / span 2; /* 从第1行开始，跨越2行；从第1列开始，跨越2列 */
        }
        .item2 {
            grid-area: 1 / 3 / span 3 / span 1; /* 从第1行开始，跨越3行；从第3列开始，跨越1列 */
        }
        .item3 {
            grid-area: 3 / 1 / span 1 / span 2; /* 从第3行开始，跨越1行；从第1列开始，跨越2列 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">项目 1</div>
        <div class="grid-item item2">项目 2</div>
        <div class="grid-item item3">项目 3</div>
    </div>
</body>
</html>

布局图示

作为简写属性的布局示意图

┌─────────────────────────────────────────────┐
│                     Grid                    │
├───────┬───────┬───────┬───────┬───────┬─────┤
│       │       │       │       │       │     │
│  1    │  2    │  3    │  4    │  5    │  6  │ ← 列线
│       │       │       │       │       │     │
├───────┼───────┼───────┼───────┼───────┼─────┤ ← 行线 1
│       │       │       │       │       │     │
│       │       │       │       │       │     │
│       │       │       │       │       │     │
│       │       │       │       │       │     │
├───────┼───────┼───────┼───────┼───────┼─────┤ ← 行线 2
│       │       │       │       │       │     │
│       │       │       │       │       │     │
│       │       │       │       │       │     │
│       │       │       │       │       │     │
├───────┼───────┼───────┼───────┼───────┼─────┤ ← 行线 3
│       │       │       │       │       │     │
│       │       │       │       │       │     │
│       │       │       │       │       │     │
│       │       │       │       │       │     │
├───────┼───────┼───────┼───────┼───────┼─────┤ ← 行线 4

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

作为命名属性的布局示意图

┌─────────────────────────────────────────────┐
│                  header                     │
├───────────────┬─────────────────────────────┤
│               │                             │
│   sidebar     │           content           │
│               │                             │
├───────────────┴─────────────────────────────┤
│                  footer                     │
└─────────────────────────────────────────────┘

当使用 grid-area: header; 时，项目会占据 grid-template-areas 中定义的 header 区域。

实际应用场景

场景 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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            display: grid;
            grid-template-columns: 200px 1fr 200px;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "header header header"
                "sidebar main rightbar"
                "footer footer footer";
            min-height: 100vh;
            grid-gap: 10px;
            padding: 10px;
            background-color: #f0f0f0;
        }
        .header {
            grid-area: header;
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: #2196F3;
            color: white;
            padding: 20px;
        }
        .main {
            grid-area: main;
            background-color: white;
            padding: 20px;
        }
        .rightbar {
            grid-area: rightbar;
            background-color: #ff9800;
            color: white;
            padding: 20px;
        }
        .footer {
            grid-area: footer;
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        @media (max-width: 900px) {
            .container {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "header"
                    "main"
                    "sidebar"
                    "rightbar"
                    "footer";
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>网站标题</h1>
        </div>
        <div class="sidebar">
            <h3>左侧导航</h3>
            <ul>
                <li>首页</li>
                <li>关于我们</li>
                <li>产品</li>
                <li>联系我们</li>
            </ul>
        </div>
        <div class="main">
            <h2>主内容区域</h2>
            <p>这里是网站的主要内容...</p>
            <p>更多内容...</p>
        </div>
        <div class="rightbar">
            <h3>右侧边栏</h3>
            <p>这里是右侧边栏内容，比如最新消息、热门文章等。</p>
        </div>
        <div class="footer">
            <p>版权所有 © 2023</p>
        </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>
        .dashboard {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: auto auto 1fr auto;
            grid-template-areas:
                "title title title title"
                "stats stats stats stats"
                "main main main sidebar"
                "footer footer footer footer";
            min-height: 100vh;
            grid-gap: 20px;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .dashboard-title {
            grid-area: title;
            background-color: #3498db;
            color: white;
            padding: 20px;
            border-radius: 8px;
        }
        .stats-container {
            grid-area: stats;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 15px;
        }
        .stat-card {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .main-content {
            grid-area: main;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .sidebar {
            grid-area: sidebar;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .footer {
            grid-area: footer;
            background-color: #333;
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        @media (max-width: 1200px) {
            .dashboard {
                grid-template-columns: repeat(2, 1fr);
                grid-template-areas:
                    "title title"
                    "stats stats"
                    "main main"
                    "sidebar sidebar"
                    "footer footer";
            }
            .stats-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "title"
                    "stats"
                    "main"
                    "sidebar"
                    "footer";
            }
            .stats-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="dashboard-title">
            <h1>管理仪表板</h1>
        </div>
        <div class="stats-container">
            <div class="stat-card">
                <h3>总用户数</h3>
                <p>1,234</p>
            </div>
            <div class="stat-card">
                <h3>今日访问</h3>
                <p>567</p>
            </div>
            <div class="stat-card">
                <h3>转化率</h3>
                <p>24.5%</p>
            </div>
            <div class="stat-card">
                <h3>总收入</h3>
                <p>¥12,345</p>
            </div>
        </div>
        <div class="main-content">
            <h2>销售数据</h2>
            <p>这里显示销售数据图表...</p>
        </div>
        <div class="sidebar">
            <h3>最近活动</h3>
            <ul>
                <li>用户 A 购买了产品</li>
                <li>用户 B 注册了账号</li>
                <li>用户 C 提交了反馈</li>
            </ul>
        </div>
        <div class="footer">
            <p>最后更新: 2023-12-01 10:00</p>
        </div>
    </div>
</body>
</html>

浏览器兼容性

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

总结

grid-area 属性是 CSS Grid 布局中非常强大和灵活的工具，它允许您：

作为简写属性：在一个声明中同时设置网格项目的行和列位置
作为命名属性：为网格项目分配名称，与 grid-template-areas 配合使用
使用多种取值类型：包括数字、名称、关键字和字符串
创建复杂布局：轻松实现各种复杂的网页布局结构
实现响应式设计：通过媒体查询调整布局结构
编写简洁代码：减少代码量，提高可读性和维护性

练习作业

基础练习：创建一个 3x3 的网格布局，使用 grid-area 简写属性让不同项目占据不同的区域。
进阶练习：创建一个完整的网页布局，包含头部、导航、主内容、侧边栏和页脚，使用 grid-area 命名属性和 grid-template-areas 实现。
挑战练习：创建一个响应式仪表板布局，包含标题、统计卡片、主内容和侧边栏，使用 grid-area 属性实现，并确保在不同屏幕尺寸上都能良好显示。

扩展阅读

通过本教程，您应该已经掌握了 grid-area 属性的两种主要用法，能够在 Grid 布局中灵活控制项目的位置和大小。结合其他 Grid 属性，您可以创建出更加复杂和美观的网页布局。