当前位置：首页 > 文章列表 > 文章 > 前端 > CSSGrid布局：grid-template-areas使用教程

CSSGrid布局：grid-template-areas使用教程

2025-11-19 19:35:48 0浏览收藏

想要掌握更直观的CSS Grid布局？本文详解`grid-template-areas`属性的使用技巧，教你如何通过命名网格区域，像“画图”一样轻松规划页面结构。`grid-template-areas`配合`display: grid`，以字符串形式定义网格行，名称对应区域，例如"header header"表示首行两列均为header。子元素通过`grid-area`属性匹配名称定位，句点表示空白区域。结合`grid-template-rows`和`grid-template-columns`设置行列尺寸，可实现仪表盘等复杂布局。使用`grid-template-areas`，只需保证区域为矩形且连续，同名区域自动匹配，让复杂的二维布局变得清晰易懂，提升网页开发效率。

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

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

使用 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; }

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

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;
}

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

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

理论要掌握，实操不能落！以上关于《CSSGrid布局：grid-template-areas使用教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！