使用 grid-template-areas 可直观定义页面布局。1. 通过字符串命名区域排列，如”header header header””sidebar main main””footer footer footer”创建三行三列结构；2. 子元素用 grid-area 关联名称，自动定位；3. 配合 grid-template-rows 和 grid-template-columns 设置尺寸，媒体查询中可重定义区域实现响应式；4. 用点（.）表示空白单元格。该方法语义清晰，易于维护，适合常见网页结构。
使用 grid-template-areas 可以让 CSS Grid 布局变得直观又高效。它允许你通过命名区域的方式，像画草图一样定义页面结构，代码清晰、易读、易维护。
1. 定义网格容器与区域名称
先设置一个容器为 grid 布局，然后用 grid-template-areas 指定每一行中各个区域的排列方式。每个字符串代表一行，每个单词代表一个单元格区域。
.container {
display: grid;
grid-template-areas:
“header header header”
“sidebar main main”
“footer 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; }
这样每个元素就会自动放到对应的位置，无需关心行列索引。
3. 调整区域大小与响应式适配
配合 grid-template-rows 和 grid-template-columns 控制区域高度和宽度。
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情 
.container {
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 200px 1fr;
}
在小屏幕上可以重新定义区域排布，实现响应式：
@media (max-width: 600px) {
.container {
grid-template-areas:
“header”
“main”
“sidebar”
“footer”;
}
}
此时所有区域垂直堆叠，更适合手机浏览。
4. 使用点（.）留空区域
如果某个格子不需要内容，可以用点表示空白。
grid-template-areas:
“header header header”
“sidebar . main”
“footer footer footer”;
中间那一格就是空的，不放置任何元素。
基本上就这些。用 grid-template-areas 能快速构建语义化布局，特别适合页头、侧边栏、主内容、页脚这类常见结构。写起来像画图，改起来也方便。
以上就是如何通过css grid-template-areas快速布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1016799.html
微信扫一扫 
支付宝扫一扫 
