Grid-grid-template-areas 属性

你想再次深入掌握 grid-template-areas 这个属性的完整用法，我会用一个覆盖核心场景的完整可运行实例，结合可视化布局、跨行列、空区域、错误示范等内容，帮你彻底理解这个属性的使用逻辑和实战价值。

一、核心回顾（快速锚定）

grid-template-areas 是 Grid 布局中可视化定义区域的属性：

通过"字符串行"模拟布局结构，每个字符串代表一行，字符串内的空格分隔列；
相同的区域名连续排列表示跨行列，. 表示空区域；
网格项通过 grid-area 绑定区域名，自动定位到对应位置；
核心规则：区域必须是矩形、每行的列数必须和 grid-template-columns 一致。

二、完整可运行实例（全场景覆盖）

这个实例包含"基础布局、跨行列布局、空区域布局、错误示范"4个场景，代码可直接复制运行：

html 复制代码

<!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-areas 完整实例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      padding: 30px;
      font-family: "微软雅黑", Arial, sans-serif;
      background: #f9f9f9;
    }
    .demo-box {
      margin-bottom: 50px;
      padding: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    h3 {
      margin-bottom: 20px;
      color: #333;
      border-bottom: 2px solid #42b983;
      padding-bottom: 8px;
    }
    /* 通用网格项样式 */
    .grid-item {
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border-radius: 4px;
      padding: 10px;
    }
    /* 场景1：基础可视化布局（头部+侧边栏+主体+底部） */
    .grid-1 {
      display: grid;
      width: 100%;
      max-width: 1200px;
      height: 400px;
      /* 定义列：侧边栏250px + 主体自适应 + 预留200px */
      grid-template-columns: 250px 1fr 200px;
      /* 定义行：头部80px + 主体自适应 + 底部60px */
      grid-template-rows: 80px 1fr 60px;
      /* 核心：可视化定义区域 */
      grid-template-areas:
        "header header header"  /* 第一行：header跨3列 */
        "sidebar main ."        /* 第二行：sidebar + main + 空区域 */
        "footer footer footer"; /* 第三行：footer跨3列 */
      gap: 10px;
    }
    .grid-1 .header {
      grid-area: header; /* 绑定header区域 */
      background: #42b983;
    }
    .grid-1 .sidebar {
      grid-area: sidebar; /* 绑定sidebar区域 */
      background: #3498db;
    }
    .grid-1 .main {
      grid-area: main; /* 绑定main区域 */
      background: #f1c40f;
    }
    .grid-1 .footer {
      grid-area: footer; /* 绑定footer区域 */
      background: #e74c3c;
    }

    /* 场景2：跨行列布局（合并单元格效果） */
    .grid-2 {
      display: grid;
      width: 100%;
      max-width: 800px;
      height: 300px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      /* 核心：跨行列的区域定义 */
      grid-template-areas:
        "header header sidebar"  /* header跨2列，sidebar占1列 */
        "main main sidebar"      /* main跨2列，sidebar跨2行 */
        "main main footer";      /* main跨2行，footer占1列 */
      gap: 10px;
    }
    .grid-2 .header { grid-area: header; background: #9b59b6; }
    .grid-2 .sidebar { grid-area: sidebar; background: #1abc9c; }
    .grid-2 .main { grid-area: main; background: #f39c12; }
    .grid-2 .footer { grid-area: footer; background: #8e44ad; }

    /* 场景3：空区域布局（. 表示空单元格） */
    .grid-3 {
      display: grid;
      width: 100%;
      max-width: 800px;
      height: 200px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      /* 核心：空区域的使用 */
      grid-template-areas:
        ". logo ."       /* 第一行：空 + logo + 空 */
        "nav nav search"; /* 第二行：nav跨2列 + search */
      gap: 10px;
    }
    .grid-3 .logo { grid-area: logo; background: #2ecc71; }
    .grid-3 .nav { grid-area: nav; background: #34495e; }
    .grid-3 .search { grid-area: search; background: #e67e22; }

    /* 场景4：错误示范（非矩形区域，属性失效） */
    .grid-4 {
      display: grid;
      width: 100%;
      max-width: 800px;
      height: 200px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      /* 错误：main区域是L型，非矩形，该属性失效 */
      grid-template-areas:
        "header main sidebar"
        "main main sidebar";
      gap: 10px;
    }
    .grid-4 .header { grid-area: header; background: #42b983; }
    .grid-4 .main { grid-area: main; background: #f1c40f; }
    .grid-4 .sidebar { grid-area: sidebar; background: #3498db; }

    /* 辅助说明文字 */
    .desc {
      margin-top: 15px;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }
    .error-tip {
      color: #e74c3c;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <!-- 场景1：基础可视化布局 -->
  <div class="demo-box">
    <h3>场景1：基础布局（头部+侧边栏+主体+底部）</h3>
    <div class="grid-1">
      <div class="grid-item header">头部 (header)</div>
      <div class="grid-item sidebar">侧边栏 (sidebar)</div>
      <div class="grid-item main">主体 (main)</div>
      <div class="grid-item footer">底部 (footer)</div>
    </div>
    <p class="desc">核心：grid-template-areas 可视化定义3行3列，header/footer跨3列，第二行第三列为空区域（.）；<br>网格项只需绑定grid-area即可自动定位，无需计算行列数。</p>
  </div>

  <!-- 场景2：跨行列布局 -->
  <div class="demo-box">
    <h3>场景2：跨行列布局（合并单元格效果）</h3>
    <div class="grid-2">
      <div class="grid-item header">头部 (header)</div>
      <div class="grid-item sidebar">侧边栏 (sidebar)</div>
      <div class="grid-item main">主体 (main)</div>
      <div class="grid-item footer">底部 (footer)</div>
    </div>
    <p class="desc">核心：sidebar跨2行，main跨2列2行，header跨2列；<br>相同区域名连续排列即可实现跨行列，无需用grid-column/row手动计算。</p>
  </div>

  <!-- 场景3：空区域布局 -->
  <div class="demo-box">
    <h3>场景3：空区域布局（. 表示空单元格）</h3>
    <div class="grid-3">
      <div class="grid-item logo">Logo</div>
      <div class="grid-item nav">导航栏</div>
      <div class="grid-item search">搜索框</div>
    </div>
    <p class="desc">核心：用.表示空区域，logo在第一行居中（左右为空），nav跨2列，search占1列；<br>适合需要"留白"的布局场景。</p>
  </div>

  <!-- 场景4：错误示范 -->
  <div class="demo-box">
    <h3>场景4：错误示范（非矩形区域，属性失效）</h3>
    <div class="grid-4">
      <div class="grid-item header">头部</div>
      <div class="grid-item main">主体</div>
      <div class="grid-item sidebar">侧边栏</div>
    </div>
    <p class="desc error-tip">错误原因：main区域是L型（第一行第二列 + 第二行第一、二列），非矩形，grid-template-areas 失效；<br>修复方案：确保所有区域都是矩形（比如将header改为跨2列，main只占第二行）。</p>
  </div>
</body>
</html>

三、关键场景解析

1. 场景1（基础布局）

核心价值：无需计算行列数，用"header/header/header"这种可视化写法，直接定义头部跨3列，符合直观的布局思维；
适配性：配合 grid-template-columns: 250px 1fr 200px，固定侧边栏+弹性主体，是前端最经典的页面布局模式。

2. 场景2（跨行列）

核心技巧：相同区域名同行连续 表示跨列，同列连续表示跨行；
对比优势：如果用 grid-column/row 实现相同效果，需要写 grid-column: 1 / 3、grid-row: 2 / 4，而 grid-template-areas 更直观。

3. 场景3（空区域）

实用场景：Logo居中、按钮组留白、表单布局的空行/空列；
注意：. 可以写多个（比如 ...），但多个. 仍表示一个空单元格，每行的列数仍需和 grid-template-columns 一致。

4. 场景4（错误示范）

最常见错误：区域非矩形（L型、分散型），导致属性完全失效；
修复原则：所有区域必须是矩形，比如将错误的区域定义改为：
css 复制代码
```
grid-template-areas:
  "header header sidebar"
  "main main sidebar";
```
此时main是矩形（第二行1-2列），header是矩形（第一行1-2列），sidebar是矩形（1-2行3列），属性恢复生效。

四、实战使用技巧

命名规范：区域名建议用语义化名称（header/sidebar/main/footer/logo/nav），便于维护；
简化写法：如果多行的区域布局相同，可重复使用（比如表格布局中重复的行）；
调试技巧 ：如果布局不符合预期，先检查两点：
- 每行的列数是否和 grid-template-columns 数量一致；
- 所有区域是否都是矩形；
混合使用 ：grid-template-areas 定义整体布局，局部细节用 grid-column/row 微调（比如某个按钮需要偏移）。

总结

grid-template-areas 是 Grid 布局的可视化布局工具，核心优势是"直观、无需计算行列数"，符合人类的布局思维；
核心规则：区域必须是矩形、每行列数和 grid-template-columns 一致、. 表示空区域；
最佳实践：配合 grid-template-columns/rows 定义行列尺寸，网格项用 grid-area 绑定区域名，实现"所见即所得"的布局；
避坑重点：避免区域非矩形、每行列数不一致这两个核心错误。