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

grid-template-areas通过命名区域直观定义网格布局，配合display: grid和grid-area实现元素定位，支持空单元格与响应式调整，使页面结构更易读和维护。

如何用css grid-template-areas快速布局

CSS 的 grid-template-areas 是一种直观且强大的布局方式，特别适合构建页面的整体结构。它允许你通过命名区域来可视化地定义网格布局，让代码更易读、维护更方便。

理解 grid-template-areas 的基本语法

grid-template-areas 需要配合 display: grid 使用，通过在容器中定义一个字符串网格来映射命名区域。

每个字符串代表一行，每行中的单词代表一个网格区域名称，相同的名称会合并成一个区域。

示例：

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

这段代码创建了一个三行三列的布局：

header 占据第一行全部三列
sidebar 在第二行第一列
main 在第二行后两列
footer 占据第三行全部三列

为区域分配实际元素

使用 grid-area 属性将具体元素与模板中的名称对应起来。

HTML 示例：

<div class="container">
  <header>Header</header><aside>Sidebar</aside><main>Main Content</main><footer>Footer</footer>
</div>

CSS 中指定每个元素对应的区域：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

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

这样，每个元素就会自动放入你在 grid-template-areas 中定义的位置。

灵活调整布局结构

你可以轻松修改布局结构，比如让侧边栏跨两行：

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

此时 sidebar 从上到下占据两行，footer 只占底部右侧。

用点号（.）表示空单元格：

grid-template-areas:
  "header  header"
  ".       main"
  "footer  footer";

第一个位置留空，不放置任何内容。

响应式布局中的应用

结合媒体查询，可以为不同屏幕尺寸切换布局结构。

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

移动端时，所有区域垂直堆叠，提升可读性。

基本上就这些。用 grid-template-areas 布局就像画草图一样直观，特别适合页头、侧边栏、主内容、页脚这类常见结构，写起来清晰，改起来也快。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！