在css中grid-template-areas布局示例

使用 grid-template-areas 可定义直观的网格布局：通过命名区域将页面划分为头部、侧边栏、主内容和底部，配合 grid-area 指定元素位置，实现清晰、易调整的响应式结构。

使用 grid-template-areas 可以通过直观的视觉方式定义网格区域，让布局更清晰易读。下面是一个典型的示例，展示如何用它构建一个简单的网页布局：包含头部、侧边栏、主内容区和底部。

HTML 结构

  

Header

  Sidebar
  ain>Main Content
  

CSS 样式

通过 grid-template-areas 将不同元素分配到命名区域：

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

header {
  grid-area: header;
  background-color: #4CAF50;
}

aside {
  grid-area: sidebar;
  background-color: #FFC107;
}

main {
  grid-area: main;
  background-color: #E3F2FD;
}

footer {
  grid-area: footer;
  background-color: #9E9E9E;
}

说明与要点

上面代码中，grid-template-areas 定义了一个三行两列的布局：

• 第一行：“header header” 表示头部横跨两列
• 第二行：“sidebar main” 左边是侧边栏，右边是主内容
• 第三行：“footer footer” 底部也横跨整页
• 每个区域名称必须对应一个设置了 grid-area 的子元素
• 用点（.）可以表示空单元格，比如 "header header" 和 ". main" 中的 . 代表留空

实际应用场景

这种写法特别适合固定结构的页面布局，如仪表盘、管理后台或文章页。你可以轻松调整区域位置，比如把侧边栏移到右边：

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

只需交换 main 和 sidebar 的位置，布局即刻改变，无需修改 HTML 结构。

基本上就这些，grid-template-areas 让网格布局像画草图一样简单。