首页 > 文章 > 前端

CSSGrid布局入门与实例解析

时间：2025-10-30 21:00:03 438浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《CSS Grid布局示例详解》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

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

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

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

HTML 结构

Header

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 让网格布局像画草图一样简单。

理论要掌握，实操不能落！以上关于《CSSGrid布局入门与实例解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

网页布局网格布局 CSSGrid grid-template-areas grid-area