如何在CSS中使用Grid实现主次内容区域布局

在网页开发场景中，主次内容区域布局是绝大多数页面的基础结构，比如左侧导航加右侧内容、顶部头部加中间主体加底部页脚的组合都属于这类布局。CSS Grid布局中的grid-template-areas属性可以让开发者通过语义化的区域命名来定义布局，不需要复杂的计算就能快速搭建出清晰的结构。

grid-template-areas基础概念

grid-template-areas是CSS Grid布局中用于定义网格区域名称的属性，它的值是由字符串组成的列表，每个字符串代表网格的一行，字符串中的名称对应网格中的区域。使用这个属性前需要先通过display: grid将容器设置为网格容器，同时可以通过grid-template-columns和grid-template-rows定义网格的列宽和行高。

命名区域时需要注意，相同名称的单元格会被合并为一个区域，用点号.可以表示空的网格单元格。比如下面的代码就定义了一个两行两列的网格，其中第一行第一列的名称为header，第一行第二列的名称为aside，第二行的两个单元格名称都是main：

.container {
  display: grid;
  /* 定义两列，第一列200px，第二列占剩余空间 */
  grid-template-columns: 200px 1fr;
  /* 定义两行，第一行60px，第二行占剩余空间 */
  grid-template-rows: 60px 1fr;
  /* 定义区域布局 */
  grid-template-areas:
    "header header"
    "aside main";
  height: 100vh;
}

实现基础主次内容布局

下面我们通过一个实际案例来实现常见的页面主次布局：顶部是通栏头部，左侧是次要的侧边栏，右侧是主要的内容区域，底部是通栏页脚。首先编写HTML结构：

<div class="page-container">
  <header class="page-header">网站头部</header>
  <aside class="page-sidebar">侧边栏导航</aside>
  <main class="page-main">主要内容区域</main>
  <footer class="page-footer">网站页脚</footer>
</div>

接下来使用grid-template-areas定义布局，给每个子元素通过grid-area属性指定对应的区域名称，和grid-template-areas中定义的名称对应即可：

.page-container {
  display: grid;
  /* 四列：侧边栏200px，主内容占剩余空间，这里列定义需要和区域对应，实际区域是3行2列 */
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  /* 定义三行两列的区域：第一行两个单元格都是header，第二行第一个是sidebar第二个是main，第三行两个都是footer */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

/* 给每个区域指定对应的grid-area名称 */
.page-header {
  grid-area: header;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.page-sidebar {
  grid-area: sidebar;
  background-color: #e8e8e8;
  padding: 20px;
}

.page-main {
  grid-area: main;
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #ddd;
}

.page-footer {
  grid-area: footer;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

上面的代码就实现了一个完整的主次内容布局，侧边栏作为次要内容区域宽度固定，主内容区域自适应剩余空间，头部和页脚通栏显示，整体结构清晰，代码量很少。

适配响应式场景

在移动端场景下，通常需要将侧边栏移到主内容下方，或者隐藏侧边栏，这时候只需要通过媒体查询修改grid-template-areas的定义即可，不需要调整HTML结构：

/* 移动端适配，屏幕宽度小于768px时修改布局 */
@media (max-width: 768px) {
  .page-container {
    /* 改为单列布局 */
    grid-template-columns: 1fr;
    /* 四行：头部、主内容、侧边栏、页脚 */
    grid-template-rows: 60px 1fr auto 40px;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

这样在移动端就会变成垂直排列的结构，主内容区域在上方，侧边栏在下方，符合移动端的阅读习惯。

注意事项

• grid-template-areas中每一行的字符串长度必须一致，也就是每一行的区域数量要相同，否则布局会失效。
• 区域名称不能是CSS的保留字，比如none、auto等，建议使用语义化的名称方便维护。
• 如果某个区域不需要显示，可以用点号.代替名称，对应的单元格会保持为空。
• grid-template-areas需要和grid-template-columns、grid-template-rows配合使用，否则网格的列宽和行高会采用默认值，可能无法达到预期的布局效果。

总结

使用CSS Grid的grid-template-areas属性实现主次内容区域布局，相比传统布局方式代码更简洁，结构更直观，修改布局时只需要调整区域定义的字符串即可，维护成本很低。同时结合媒体查询可以轻松实现响应式适配，非常适合现代网页开发使用。开发者可以在实际项目中多尝试这种布局方式，提升开发效率。

CSS_Gridgrid-template-areas主次内容布局响应式布局修改时间：2026-07-03 17:33:26