如何用css grid-template-areas与grid-area快速布局组件-css教程-PHP中文网

如何用css grid-template-areas与grid-area快速布局组件

P粉602998670

发布： 2025-09-23 12:32:01

原创

135人浏览过

使用 grid-template-areas 和 grid-area 可通过命名区域直观构建布局。1. 在容器中用 grid-template-areas 定义行结构，如 "header header" "sidebar main" "footer footer"；2. 设置 grid-template-rows 和 grid-template-columns 确定行列尺寸；3. 子元素通过 grid-area 指定对应区域名称，如 header、sidebar 等；4. 响应式调整时，在媒体查询中重定义 grid-template-areas，如小屏改为单列堆叠；5. 区域名需完全匹配，空缺用点（.）表示。该方法提升布局可读性与维护性。

如何用css grid-template-areas与grid-area快速布局组件

使用 grid-template-areas 和 grid-area 可以直观地通过命名区域来构建页面布局，特别适合快速搭建结构清晰的组件。这种方式让布局更易读、易维护。

定义 grid-template-areas 搭建整体结构

在容器上使用 grid-template-areas，通过字符串定义每一行的区域名称，每个名称对应一个子元素的命名区域。

例如，创建一个典型的页面布局：

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

登录后复制

上面代码中：

"header header" 表示头部占据两列
"sidebar main" 表示侧边栏和主内容区并排
每行字符串对应网格的一行

用 grid-area 分配组件位置

在子元素上使用 grid-area 属性，将其与模板中的名称对应，即可自动归位。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

继续上面的例子：

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

登录后复制

这样每个组件就按你“画”出的结构排列好了，不需要关心行号或列号。

灵活调整区域实现响应式

可以通过媒体查询重新定义 grid-template-areas 来适配不同屏幕。

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

比如在小屏下堆叠布局：

@media (max-width: 600px) {
  .container {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

登录后复制

只需改变字符串结构，组件会自动重排，无需修改 HTML 结构。

基本上就这些。用名字“画”出布局，再把组件对号入座，清晰又高效。不复杂但容易忽略的是：区域名称必须与 grid-area 完全匹配，且每个字符串代表一行，空缺可用点（.）表示。

以上就是如何用css grid-template-areas与grid-area快速布局组件的详细内容，更多请关注php中文网其它相关文章！