如何使用CSS Grid实现示例图所示的5区域布局

实现思路 #

你要的这个5区域布局可以通过Grid的**模板区域（grid-template-areas）**特性快速实现，无需复杂的行列偏移配置，可读性也更高。我们先给5个区域做命名对应：

• 顶部通栏：header
• 左侧侧边栏：aside
• 右上第一区块：box1
• 右上第二区块：box2
• 右下通栏主内容：main

完整代码示例 #

HTML 结构 #

<div class="grid-container">
  <div class="item header">header</div>
  <div class="item aside">aside</div>
  <div class="item box1">box1</div>
  <div class="item box2">box2</div>
  <div class="item main">main</div>
</div>

CSS 样式 #

/* 网格容器配置 */
.grid-container {
  display: grid;
  /* 定义3列：侧边栏宽度200px，剩余宽度平分给后两列 */
  grid-template-columns: 200px 1fr 1fr;
  /* 定义3行：顶部高度80px，右上区块高度150px，剩余高度给主内容 */
  grid-template-rows: 80px 150px 1fr;
  /* 可视化定义区域布局，.代表空网格 */
  grid-template-areas: 
    "header header header"
    "aside  box1   box2"
    "aside  main   main";
  /* 可选：设置网格项间距 */
  gap: 12px;
  /* 可选：设置容器高度，这里用100vh占满视口，可按需调整 */
  height: 100vh;
  padding: 12px;
  box-sizing: border-box;
}

/* 给每个网格项绑定对应区域 */
.header { grid-area: header; }
.aside { grid-area: aside; }
.box1 { grid-area: box1; }
.box2 { grid-area: box2; }
.main { grid-area: main; }

/* 可选：演示用样式，可删除 */
.item {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  background: #f5f5f5;
}

核心配置说明 #

• grid-template-areas的字符串排版和实际布局一一对应，调整布局只需要修改字符串里的区域名即可，维护成本很低
• 尺寸单位可以按需替换：如果不需要固定侧边栏可以把200px改成1fr，行高也可以用auto适配内容高度
• 响应式适配只需要在媒体查询里重新定义grid-template-columns和grid-template-areas即可，比如移动端改成单列布局：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 80px 100px 100px 100px 1fr;
    grid-template-areas: 
      "header"
      "aside"
      "box1"
      "box2"
      "main";
  }
}

内容的提问来源于stack exchange，提问作者WreewanMorhee