Grid 模板区域：语义化的布局定义方式

想象你在画建筑平面图，你不会说"这是从线 1 到线 3，从线 2 到线 5 的区域"，而是会直接标注"客厅"、"厨房"、"卧室"。Grid 模板区域（Grid Template Areas）就是这样的思路——用直观的名称而不是抽象的数字来定义布局。

在前面的章节中，我们学习了用网格线编号来定位元素。这种方法很精确，但当布局变复杂时，代码可能变得难以理解。Grid 模板区域提供了一种更直观、更语义化的方式来定义布局，让你的代码像一张可视化的布局图。

模板区域基础

grid-template-areas：定义布局模板

grid-template-areas 属性让你用名称来规划网格布局。每个字符串代表一行，名称代表单元格。

让我们从一个简单的例子开始：

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
}

这段代码创建了一个 3×3 的网格，并给每个区域命名：

┌────────┬────────┬────────┐
│ header │ header │ header │
├────────┼────────┼────────┤
│sidebar │  main  │  aside │
├────────┼────────┼────────┤
│ footer │ footer │ footer │
└────────┴────────┴────────┘

看到了吗？这个布局一目了然：

第一行：header 横跨所有三列
第二行：sidebar、main、aside 各占一列
第三行：footer 横跨所有三列

grid-area：指定项目所属区域

定义好模板后，用 grid-area 将项目分配到相应区域：

html

<div class="container">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Main Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 10px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
}

header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
}

nav {
  grid-area: sidebar;
  background-color: #f5f5f5;
  padding: 20px;
}

main {
  grid-area: main;
  background-color: white;
  padding: 20px;
}

aside {
  grid-area: aside;
  background-color: #e3f2fd;
  padding: 20px;
}

footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 20px;
}

现在，每个元素都清楚地标注了它在布局中的角色。不需要记忆网格线编号，代码直观易懂。

空单元格

如果某个单元格不需要放任何内容，使用点号（.）表示：

css

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  grid-template-areas:
    "header header  header"
    "content content ."
    "footer  footer  footer";
}

在这个例子中，第二行的第三个单元格是空的（用 . 表示）。

你可以用多个点号表示连续的空单元格：

css

.grid {
  grid-template-areas:
    "header header  header"
    "content content ......"
    "footer  footer  footer";
}

虽然多个点号和一个点号效果相同，但使用多个点号可以让视觉上更对齐。

命名规则和最佳实践

命名规则

区域名称必须是有效的标识符：可以包含字母、数字、下划线和连字符，但不能以数字开头
区域名称大小写敏感：Header 和 header 是不同的区域
同一个区域必须形成矩形：不能是 L 形或其他不规则形状

css

/* ✅ 正确：header 是一个矩形 */
.grid {
  grid-template-areas:
    "header header"
    "main   aside";
}

/* ❌ 错误：header 是 L 形 */
.grid {
  grid-template-areas:
    "header main"
    "header aside";
  /* 这会导致错误！ */
}

最佳实践

1. 使用描述性名称

css

/* ✅ 好的命名 */
.grid {
  grid-template-areas:
    "site-header site-header site-header"
    "navigation main-content sidebar"
    "site-footer site-footer site-footer";
}

/* ❌ 不好的命名 */
.grid {
  grid-template-areas:
    "a a a"
    "b c d"
    "e e e";
}

2. 保持对齐以提高可读性

css

/* ✅ 良好的对齐 */
.grid {
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
}

/* ❌ 难以阅读 */
.grid {
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
}

使用统一的空格数让每列视觉上对齐，就像在看真正的布局图一样。

3. 与 HTML 语义标签配合

html

<div class="page-layout">
  <header>...</header>
  <!-- grid-area: header -->
  <nav>...</nav>
  <!-- grid-area: navigation -->
  <main>...</main>
  <!-- grid-area: content -->
  <aside>...</aside>
  <!-- grid-area: sidebar -->
  <footer>...</footer>
  <!-- grid-area: footer -->
</div>

使用语义化的 HTML 标签和相应的区域名称，让代码结构一目了然。

复杂布局示例

博客布局

让我们创建一个专业的博客布局：

html

<div class="blog-layout">
  <header class="site-header">
    <h1>My Blog</h1>
  </header>
  <nav class="main-nav">Navigation</nav>
  <article class="post">
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
  <aside class="sidebar">
    <h3>About</h3>
    <p>Sidebar content...</p>
  </aside>
  <aside class="widgets">
    <h3>Popular Posts</h3>
    <ul>
      <li>Post 1</li>
      <li>Post 2</li>
    </ul>
  </aside>
  <footer class="site-footer">
    <p>&copy; 2025 My Blog</p>
  </footer>
</div>

css

.blog-layout {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
  grid-template-areas:
    "header  header  header"
    "nav     nav     nav"
    "sidebar post    widgets"
    "footer  footer  footer";
}

.site-header {
  grid-area: header;
  background-color: #2196f3;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
}

.main-nav {
  grid-area: nav;
  background-color: #333;
  color: white;
  padding: 15px;
  border-radius: 8px;
}

.post {
  grid-area: post;
  background-color: white;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

.widgets {
  grid-area: widgets;
  background-color: #e3f2fd;
  padding: 20px;
  border-radius: 8px;
}

.site-footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

这个布局清晰地展示了各个部分的位置关系，代码维护起来也很容易。

仪表板布局

模板区域在创建复杂的仪表板时特别有用：

html

<div class="dashboard">
  <header class="dash-header">Dashboard</header>
  <nav class="dash-sidebar">Sidebar</nav>
  <div class="stats">Statistics</div>
  <div class="chart-main">Main Chart</div>
  <div class="chart-sub">Sub Chart</div>
  <div class="activity">Activity Feed</div>
  <div class="tasks">Task List</div>
  <footer class="dash-footer">Footer</footer>
</div>

css

.dashboard {
  display: grid;
  grid-template-columns: 250px repeat(3, 1fr);
  grid-template-rows: auto 200px 300px 250px auto;
  min-height: 100vh;
  gap: 15px;
  padding: 15px;
  background-color: #f5f5f5;
  grid-template-areas:
    "header     header      header      header"
    "sidebar    stats       stats       stats"
    "sidebar    chart-main  chart-main  chart-sub"
    "sidebar    activity    tasks       tasks"
    "footer     footer      footer      footer";
}

.dash-header {
  grid-area: header;
  background-color: #2196f3;
  color: white;
  padding: 20px;
  border-radius: 8px;
  font-size: 24px;
  font-weight: bold;
}

.dash-sidebar {
  grid-area: sidebar;
  background-color: #263238;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.stats {
  grid-area: stats;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-main {
  grid-area: chart-main;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-sub {
  grid-area: chart-sub;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.activity {
  grid-area: activity;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tasks {
  grid-area: tasks;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dash-footer {
  grid-area: footer;
  background-color: #263238;
  color: white;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}

应用程序布局

模板区域非常适合定义应用程序的整体结构：

css

.app-layout {
  display: grid;
  grid-template-columns: 60px 200px 1fr 300px;
  grid-template-rows: 60px 1fr 40px;
  height: 100vh;
  grid-template-areas:
    "icon-bar app-header app-header app-header"
    "icon-bar sidebar     main       panel"
    "icon-bar status-bar  status-bar status-bar";
}

.icon-bar {
  grid-area: icon-bar;
  background-color: #37474f;
}

.app-header {
  grid-area: app-header;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}

.main {
  grid-area: main;
  background-color: #fff;
  overflow-y: auto;
}

.panel {
  grid-area: panel;
  background-color: #fafafa;
  border-left: 1px solid #ddd;
}

.status-bar {
  grid-area: status-bar;
  background-color: #2196f3;
  color: white;
}

##响应式模板区域

模板区域的真正威力在于配合媒体查询实现响应式布局。你可以在不同屏幕尺寸下重新定义 grid-template-areas，实现完全不同的布局。

移动端优先的博客布局

css

/* 移动端：单列布局 */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 15px;
  padding: 15px;
  grid-template-areas:
    "header"
    "nav"
    "post"
    "widgets"
    "sidebar"
    "footer";
}

/* 平板：两列布局 */
@media (min-width: 768px) {
  .blog-layout {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "header  header"
      "nav     nav"
      "post    widgets"
      "post    sidebar"
      "footer  footer";
  }
}

/* 桌面：三列布局 */
@media (min-width: 1024px) {
  .blog-layout {
    grid-template-columns: 200px 1fr 300px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "sidebar post    widgets"
      "footer  footer  footer";
  }
}

看到了吗？通过重新定义 grid-template-areas，我们在不同屏幕上实现了完全不同的布局：

移动端（小于 768px）：

┌─────────┐
│ Header  │
├─────────┤
│ Nav     │
├─────────┤
│ Post    │
├─────────┤
│ Widgets │
├─────────┤
│ Sidebar │
├─────────┤
│ Footer  │
└─────────┘

平板（768px - 1023px）：

┌────────┬────────┐
│ Header │ Header │
├────────┴────────┤
│ Nav    │ Nav    │
├────────┬────────┤
│ Post   │Widgets │
│        ├────────┤
│        │Sidebar │
├────────┴────────┤
│ Footer │ Footer │
└────────┴────────┘

桌面（1024px+）：

┌────────┬────────┬────────┐
│ Header │ Header │ Header │
├────────┴────────┴────────┤
│ Nav    │ Nav    │ Nav    │
├────────┬────────┬────────┤
│Sidebar │ Post   │Widgets │
├────────┴────────┴────────┤
│ Footer │ Footer │ Footer │
└────────┴────────┴────────┘

渐进增强的仪表板

css

/* 移动端：垂直堆叠 */
.dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px;
  grid-template-areas:
    "header"
    "stats"
    "chart-main"
    "chart-sub"
    "activity"
    "tasks";
}

/* 在移动端隐藏侧边栏和底部栏 */
.dash-sidebar,
.dash-footer {
  display: none;
}

/* 平板：两列 + 侧边栏 */
@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header     header"
      "sidebar    stats"
      "sidebar    chart-main"
      "sidebar    chart-sub"
      "sidebar    activity"
      "sidebar    tasks";
  }

  .dash-sidebar {
    display: block;
    grid-area: sidebar;
  }
}

/* 桌面：完整布局 */
@media (min-width: 1200px) {
  .dashboard {
    grid-template-columns: 250px repeat(3, 1fr);
    grid-template-rows: auto 200px 300px 250px auto;
    grid-template-areas:
      "header     header      header      header"
      "sidebar    stats       stats       stats"
      "sidebar    chart-main  chart-main  chart-sub"
      "sidebar    activity    tasks       tasks"
      "footer     footer      footer      footer";
  }

  .dash-footer {
    display: block;
    grid-area: footer;
  }
}

模板区域 vs 网格线定位

让我们比较这两种方法，帮助你选择最合适的。

网格线定位

css

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-column: 1 / 4;
  grid-row: 1;
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main {
  grid-column: 2;
  grid-row: 2;
}

.aside {
  grid-column: 3;
  grid-row: 2;
}

.footer {
  grid-column: 1 / 4;
  grid-row: 3;
}

优点：

更灵活，可以精确控制
可以创建非矩形的排列
适合动态内容和复杂计算

缺点：

代码不够直观
维护时需要记住网格结构
难以一眼看出整体布局

模板区域

css

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main  aside"
    "footer footer footer";
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.aside {
  grid-area: aside;
}
.footer {
  grid-area: footer;
}

优点：

代码像布局图一样直观
维护容易，一眼看出结构
响应式调整简单
语义化，自解释

缺点：

只能创建矩形区域
不适合需要精确数值控制的场景
区域必须连续（不能跳格）

何时使用哪种方法？

使用模板区域：

整体页面布局
有清晰的区域划分
需要响应式调整
团队协作项目（代码更易读）

使用网格线定位：

需要非矩形排列
动态内容（数量不固定）
需要精确的数值控制
复杂的重叠布局

组合使用：

css

/* 用模板区域定义主要结构 */
.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

/* 主内容区域内部用网格线定位 */
.main {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

常见问题和解决方案

问题 1：区域名称拼写错误

css

.grid {
  grid-template-areas:
    "header header"
    "main   aside";
}

.content {
  grid-area: mian; /* 拼写错误！应该是 main */
}

解决方案： 使用编辑器的自动补全，或者定义常量：

css

/* 可以在注释中列出所有区域名称 */
.grid {
  /* Areas: header, main, aside, footer */
  grid-template-areas:
    "header header"
    "main   aside";
}

问题 2：忘记定义所有单元格

css

/* ❌ 错误：行的单元格数量不一致 */
.grid {
  grid-template-areas:
    "header header header"
    "main   aside"; /* 只有 2 个单元格，应该有 3 个！ */
}

解决方案： 确保每行有相同数量的单元格，使用 . 表示空单元格：

css

/* ✅ 正确 */
.grid {
  grid-template-areas:
    "header header header"
    "main   aside  ."; /* 第三个单元格留空 */
}

问题 3：响应式布局时选择器重复

css

/* ❌ 冗余 */
.header {
  grid-area: header;
}

@media (min-width: 768px) {
  .header {
    grid-area: header;
  } /* 重复定义 */
}

解决方案： grid-area 只需定义一次，在媒体查询中只改变 grid-template-areas：

css

/* ✅ 简洁 */
.header {
  grid-area: header;
} /* 只定义一次 */

.grid {
  grid-template-areas: "header" "main";
}

@media (min-width: 768px) {
  .grid {
    grid-template-areas: "header header" "sidebar main";
    /* 只改变模板，不重复定义 grid-area */
  }
}

总结

Grid 模板区域是一种强大而直观的布局方式，让你的代码像布局图一样清晰可读。

核心概念回顾：

grid-template-areas：在容器上定义命名的区域布局
grid-area：在项目上指定它属于哪个区域
使用点号（.）表示空单元格
区域必须形成矩形

关键优势：

直观可读：代码像可视化的布局图
易于维护：一眼看出整体结构
语义化：用有意义的名称而不是数字
响应式友好：轻松重新定义不同屏幕的布局

最佳实践：

使用描述性的区域名称
保持 grid-template-areas 的对齐以提高可读性
配合语义化 HTML 标签使用
为不同屏幕尺寸重新定义模板
在需要精确控制时，结合网格线定位使用

适用场景：

整体页面布局
有明确区域划分的设计
需要响应式调整的布局
团队协作项目

掌握 Grid 模板区域，你就能用最直观的方式创建复杂的布局。在下一节中，我们将学习如何创建完全响应式的 Grid 布局，让你的设计在任何设备上都完美呈现。

Grid 模板区域：语义化的布局定义方式 ​

模板区域基础 ​

grid-template-areas：定义布局模板 ​

grid-area：指定项目所属区域 ​

空单元格 ​

命名规则和最佳实践 ​

命名规则 ​

最佳实践 ​

1. 使用描述性名称 ​

2. 保持对齐以提高可读性 ​

3. 与 HTML 语义标签配合 ​

复杂布局示例 ​

博客布局 ​

仪表板布局 ​

应用程序布局 ​

移动端优先的博客布局 ​

渐进增强的仪表板 ​

模板区域 vs 网格线定位 ​

网格线定位 ​

模板区域 ​

何时使用哪种方法？ ​

常见问题和解决方案 ​

问题 1：区域名称拼写错误 ​

问题 2：忘记定义所有单元格 ​

问题 3：响应式布局时选择器重复 ​

总结 ​

Grid 模板区域：语义化的布局定义方式

模板区域基础

grid-template-areas：定义布局模板

grid-area：指定项目所属区域

空单元格

命名规则和最佳实践

命名规则

最佳实践

1. 使用描述性名称

2. 保持对齐以提高可读性

3. 与 HTML 语义标签配合

复杂布局示例

博客布局

仪表板布局

应用程序布局

移动端优先的博客布局

渐进增强的仪表板

模板区域 vs 网格线定位

网格线定位

模板区域

何时使用哪种方法？

常见问题和解决方案

问题 1：区域名称拼写错误

问题 2：忘记定义所有单元格

问题 3：响应式布局时选择器重复

总结