编程马·菜鸟教程

Appearance

第8章：网格区域与命名 ​

在本节中，我们将介绍Grid布局中的网格区域与命名功能，这是Grid布局的强大特性之一。

8.1 grid-template-areas：给网格区域命名 ​

grid-template-areas属性用于给网格区域命名，通过字符串来定义区域的布局。

语法 ​

css
.container {
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

命名规则 ​

  • 每个字符串代表一行
  • 字符串中的每个单词代表一个网格单元格
  • 相同的单词代表同一个网格区域
  • . 代表一个空的网格单元格

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>grid-template-areas</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 200px 1fr 1fr;
      grid-template-rows: 100px 1fr 100px;
      grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      height: 400px;
    }
    
    .header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .sidebar {
      grid-area: sidebar;
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .main {
      grid-area: main;
      background-color: #2ecc71;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .footer {
      grid-area: footer;
      background-color: #9b59b6;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>grid-template-areas 示例</h1>
  <div class="container">
    <div class="header">头部</div>
    <div class="sidebar">侧边栏</div>
    <div class="main">主体内容</div>
    <div class="footer">底部</div>
  </div>
</body>
</html>

8.2 命名规则与写法 ​

基本规则 ​

  1. 每个字符串的长度必须相同（即每行的单元格数相同）
  2. 区域名称必须由字母、数字和下划线组成
  3. 区域名称不能以数字开头
  4. 区域必须是矩形的，不能是不规则形状

代码示例：复杂布局 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>复杂网格区域布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 100px 1fr 1fr 100px;
      grid-template-areas: 
        "header header header header"
        "sidebar main main main"
        "sidebar content1 content2 content3"
        "footer footer footer footer";
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      height: 500px;
    }
    
    .header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .sidebar {
      grid-area: sidebar;
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .main {
      grid-area: main;
      background-color: #2ecc71;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .content1 {
      grid-area: content1;
      background-color: #f39c12;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .content2 {
      grid-area: content2;
      background-color: #1abc9c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .content3 {
      grid-area: content3;
      background-color: #34495e;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .footer {
      grid-area: footer;
      background-color: #9b59b6;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>复杂网格区域布局</h1>
  <div class="container">
    <div class="header">头部</div>
    <div class="sidebar">侧边栏</div>
    <div class="main">主体内容</div>
    <div class="content1">内容1</div>
    <div class="content2">内容2</div>
    <div class="content3">内容3</div>
    <div class="footer">底部</div>
  </div>
</body>
</html>

8.3 grid-area：给单个项目分配命名区域 ​

grid-area属性用于给单个项目分配命名区域，配合grid-template-areas使用。

语法 ​

css
.item {
  grid-area: <area-name>;
}

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>grid-area</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 100px 100px;
      grid-template-areas: 
        "area1 area2"
        "area3 area4";
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item1 {
      grid-area: area1;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item2 {
      grid-area: area2;
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item3 {
      grid-area: area3;
      background-color: #2ecc71;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item4 {
      grid-area: area4;
      background-color: #9b59b6;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>grid-area 示例</h1>
  <div class="container">
    <div class="item1">项目1</div>
    <div class="item2">项目2</div>
    <div class="item3">项目3</div>
    <div class="item4">项目4</div>
  </div>
</body>
</html>

8.4 实操案例：用区域命名实现复杂布局 ​

代码示例：网页布局 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>网页整体布局</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    .container {
      display: grid;
      grid-template-columns: 250px 1fr 200px;
      grid-template-rows: 80px 1fr 60px;
      grid-template-areas: 
        "header header header"
        "sidebar main right"
        "footer footer footer";
      height: 100vh;
    }
    
    .header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
    
    .sidebar {
      grid-area: sidebar;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .main {
      grid-area: main;
      padding: 20px;
    }
    
    .right {
      grid-area: right;
      background-color: #f9f9f9;
      padding: 20px;
    }
    
    .footer {
      grid-area: footer;
      background-color: #333;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>网站标题</h1>
      <nav>
        <a href="#" style="color: white; margin-left: 20px;">首页</a>
        <a href="#" style="color: white; margin-left: 20px;">关于</a>
        <a href="#" style="color: white; margin-left: 20px;">服务</a>
        <a href="#" style="color: white; margin-left: 20px;">联系我们</a>
      </nav>
    </header>
    <aside class="sidebar">
      <h3>侧边栏</h3>
      <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
        <li><a href="#">菜单项4</a></li>
      </ul>
    </aside>
    <main class="main">
      <h2>主体内容</h2>
      <p>这里是网站的主体内容区域。</p>
    </main>
    <aside class="right">
      <h3>右侧边栏</h3>
      <p>这里是右侧边栏内容。</p>
    </aside>
    <footer class="footer">
      <p>© 2024 版权所有</p>
    </footer>
  </div>
</body>
</html>

8.5 进阶：grid-area的简写用法 ​

grid-area属性还可以直接指定项目的位置，而不使用命名区域。

语法 ​

css
.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>grid-area 简写用法</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .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 / 4 / 3; /* 从第3行第1列开始，到第4行第3列结束 */
    }
    
    .item5 {
      grid-area: 2 / 4 / 4 / 5; /* 从第2行第4列开始，到第4行第5列结束 */
    }
  </style>
</head>
<body>
  <h1>grid-area 简写用法</h1>
  <div class="container">
    <div class="item item1">项目1</div>
    <div class="item item2">项目2</div>
    <div class="item item3">项目3</div>
    <div class="item item4">项目4</div>
    <div class="item item5">项目5</div>
  </div>
</body>
</html>

实操练习 ​

  1. 使用grid-template-areas创建一个网页布局，包含头部、侧边栏、主体内容和底部
  2. 尝试创建一个更复杂的网格区域布局，包含多个内容区域
  3. 使用grid-area的简写用法，直接指定项目的位置
  4. 练习使用.代表空的网格单元格

通过本节的学习，你已经掌握了Grid布局中的网格区域与命名功能。这是Grid布局的强大特性之一，它可以帮助你创建更加直观和复杂的布局，使代码更加清晰易懂。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建