使用 grid-template-areas 可定义命名网格区域实现直观布局。1. 每个字符串代表一行，名称对应区域，如”header header”表示首行两列均属 header；2. 子元素通过 grid-area 匹配名称定位，句点表示空白；3. 配合 grid-template-rows 和 grid-template-columns 设置行列尺寸，如 60px 1fr 40px；4. 适用于仪表盘等复杂布局，区域需为矩形且连续，命名一致即可自动匹配，结构清晰如拼图。
使用 grid-template-areas 可以通过直观的命名方式定义网格区域，让布局更清晰易读。它允许你用类似“画图”的方式规划页面结构，特别适合构建复杂的二维布局。
1. 基本语法与结构
grid-template-areas 需要配合 display: grid 在容器上使用。每个字符串代表一行网格，其中的名称对应具体区域。
例如：
.container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer";}
上面代码表示：第一行是 header 占满两列；第二行左侧是 sidebar，右侧是 main；第三行 footer 再次占满两列。
2. 为子元素指定区域
使用 grid-area 属性将子元素与模板中的名称关联。
立即学习“前端免费学习笔记（深入）”；
示例：
.header { grid-area: header; }.sidebar { grid-area: sidebar; }.main { grid-area: main; }.footer { grid-area: footer; }
只要名称一致，元素就会被放置到对应位置。未命名的区域可以用句点（.）表示空白。
Seede AI
AI 驱动的设计工具
586 查看详情
3. 控制行列尺寸
搭配 grid-template-rows 和 grid-template-columns 设置每行每列的大小。
比如：
.container { grid-template-rows: 60px 1fr 40px; grid-template-columns: 200px 1fr;}
这样 header 高 60px，main 区域自适应高度，sidebar 宽 200px，main 占剩余宽度。
4. 实际应用场景
常见于网页整体结构布局，如仪表盘、文章页、后台管理界面等。
一个典型后台布局：
.layout { display: grid; grid-template-areas: "nav nav nav" "aside main main" "aside footer footer"; grid-template-rows: 60px 1fr 40px; grid-template-columns: 200px 1fr 1fr;}
这里顶部导航横跨三列，侧边栏占左下两行，底部版权信息只在右下角。
基本上就这些。只要名字对得上，结构就能自动匹配，写起来像拼图一样直观。注意所有行的字符数要对齐（不是必须，但便于阅读），且每个区域必须是矩形，不能断开。
以上就是如何通过css grid-template-areas实现区域布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1063788.html
微信扫一扫 
支付宝扫一扫 
