如何通过css grid-template-areas实现区域布局

使用 grid-template-areas 可定义命名网格区域实现直观布局。1. 每个字符串代表一行，名称对应区域，如"header header"表示首行两列均属 header；2. 子元素通过 grid-area 匹配名称定位，句点表示空白；3. 配合 grid-template-rows 和 grid-template-columns 设置行列尺寸，如 60px 1fr 40px；4. 适用于仪表盘等复杂布局，区域需为矩形且连续，命名一致即可自动匹配，结构清晰如拼图。

使用 grid-template-areas 可以通过直观的命名方式定义网格区域，让布局更清晰易读。它允许你用类似“画图”的方式规划页面结构，特别适合构建复杂的二维布局。

1. 基本语法与结构

grid-template-areas 需要配合 display: grid 在容器上使用。每个字符串代表一行网格，其中的名称对应具体区域。

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

上面代码表示：第一行是 header 占满两列；第二行左侧是 sidebar，右侧是 main；第三行 footer 再次占满两列。

2. 为子元素指定区域

使用 grid-area 属性将子元素与模板中的名称关联。

立即学习“前端免费学习笔记（深入）”；

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

只要名称一致，元素就会被放置到对应位置。未命名的区域可以用句点（.）表示空白。

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

30

查看详情

3. 控制行列尺寸

搭配 grid-template-rows 和 grid-template-columns 设置每行每列的大小。

.container {
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 200px 1fr;
}

这样 header 高 60px，main 区域自适应高度，sidebar 宽 200px，main 占剩余宽度。

4. 实际应用场景

常见于网页整体结构布局，如仪表盘、文章页、后台管理界面等。

.layout {
  display: grid;
  grid-template-areas:
    "nav nav nav"
    "aside main main"
    "aside footer footer";
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 200px 1fr 1fr;
}

这里顶部导航横跨三列，侧边栏占左下两行，底部版权信息只在右下角。

基本上就这些。只要名字对得上，结构就能自动匹配，写起来像拼图一样直观。注意所有行的字符数要对齐（不是必须，但便于阅读），且每个区域必须是矩形，不能断开。

以上就是如何通过css grid-template-areas实现区域布局的详细内容，更多请关注php中文网其它相关文章！