使用 grid-template-areas 可直观定义页面布局。1. 通过字符串命名网格区域，每行一个字符串；2. 子元素用 grid-area 匹配区域名；3. 配合 grid-template-columns 和 rows 设置尺寸；4. 修改布局只需调整区域字符串顺序，无需改动 HTML 或行列计算，适合结构清晰的页面设计。
使用 grid-template-areas 可以让 CSS Grid 布局更直观、易读，特别适合页面级的整体结构设计。它通过为网格区域命名，用类似“可视化”的方式定义布局，省去复杂的行/列定位。
先给容器设置 display: grid，然后使用 grid-template-areas 按行列写出你希望的布局结构，每个字符串代表一行，每个单词代表一个区域。
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
上面代码表示：第一行是 header 占满三列；第二行左侧是 sidebar，右侧两列是 main；第三行 footer 占满。
使用 grid-area 属性将子元素与定义的区域名称对应起来。
立即学习“前端免费学习笔记（深入）”；
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这样每个元素就自动放入指定位置，无需再写 grid-column 或 grid-row。
配合 grid-template-columns 和 grid-template-rows 设置具体尺寸。
.container {
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 60px 1fr 60px;
}
这里侧边栏固定 200px，主内容区域等分剩余宽度；头部和底部高 60px，中间区域自适应高度。
想修改布局？只需调整 grid-template-areas 的文本结构。比如让侧边栏在右边：
grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
不需要改 HTML 结构或重新计算行列，视觉上一目了然。
基本上就这些。用 grid-template-areas 能大幅简化复杂布局的编写，尤其适合仪表盘、网页骨架这类结构清晰的场景。不复杂但容易忽略。
以上就是在css中如何用grid-template-areas简化布局的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
833
收藏
