css布局grid-template-areas实现区域布局

使用 grid-template-areas 可直观定义网格布局，通过命名区域构建页面结构。它以字符串形式在容器上创建二维模板，每行对应一个字符串，每个词代表一个区域，重复名称合并为矩形区域，句点表示空白，且每行单元格数需一致。结合 grid-area 将子元素分配至对应区域，实现无需行列计算的自动定位。适用于头部、侧边栏、主内容、页脚等语义清晰的整体框架设计，如经典两栏布局。支持用句点留空或在媒体查询中重定义区域顺序，实现响应式调整，例如移动端堆叠排列。该方法提升可读性与维护性，但需注意命名一致与结构对齐。

使用 grid-template-areas 可以直观地通过命名区域来定义 CSS Grid 布局，让页面结构更清晰易读。它适合构建整体页面框架，比如头部、侧边栏、主内容区和页脚。

基本语法与概念

grid-template-areas 在容器上定义一个二维网格模板，通过为每个网格区域命名，并用引号内的字符串排列这些名称来形成布局。

• 每个字符串代表一行，每个单词代表一个单元格的区域名称
• 重复的名称会合并成一个矩形区域
• 用句点（.）表示空白单元格
• 所有行的单元格数量必须一致

示例：

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

这会创建三行两列的布局，header 横跨两列，footer 同样，sidebar 和 main 并排在中间行。

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

给项目分配区域

使用 grid-area 属性将子元素与定义的区域名称对应。

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

这样每个元素就会自动放入指定位置，无需再写行列定位。

奇域

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

30

查看详情

实用布局示例：经典两栏布局

常见于后台或博客页面。

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  height: 100vh;
}

.header { grid-area: head; background: #333; color: white; }
.sidebar { grid-area: side; background: #f4f4f4; }
.main   { grid-area: main; padding: 20px; }
.footer { grid-area: foot; background: #333; color: white; }

这个结构清晰表达了各部分的位置关系，易于维护和调整。

灵活处理空区域与响应式变化

可以用句点跳过某些格子，也可以在不同屏幕下重新定义区域排列。

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

此时侧边栏移到主内容下方，适应小屏显示。

基本上就这些。grid-template-areas 让布局像画草图一样直观，特别适合语义明确的页面结构设计。不复杂但容易忽略细节对齐和命名一致性。

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