使用 grid-template 可同时定义行、列与区域，通过 grid-template-areas 直观规划布局结构，结合 fr、px 等单位灵活分配空间，并利用媒体查询实现响应式设计，适用于构建清晰易维护的复杂页面布局。
使用 grid-template 可以高效地定义 CSS Grid 布局的整体结构。它是一个简写属性，用于同时设置网格的行、列和区域布局。通过 grid-template-areas、grid-template-rows 和 grid-template-columns，你可以直观地规划页面骨架。
使用 grid-template 定义整体布局
grid-template 是 grid-template-rows、grid-template-columns 和 grid-template-areas 的简写形式，语法如下：
grid-template: / ;
或者包含区域命名：
grid-template: “header header” 80px “sidebar main” 1fr / 200px 1fr;
用 grid-template-areas 可视化布局
通过为网格区域命名，可以用字符串直观描述页面结构。适合构建常见的整体布局，如头部、侧边栏、主内容区等。
立即学习“前端免费学习笔记（深入）”；
示例：实现一个带头部、侧边栏和主内容的布局
稿定抠图
AI自动消除图片背景
76 查看详情 .container { display: grid; grid-template-areas: “header header” “sidebar main”; grid-template-rows: 80px 1fr; grid-template-columns: 200px 1fr; height: 100vh;}.header { grid-area: header; background: #333; }.sidebar { grid-area: sidebar; background: #f0f0f0; }.main { grid-area: main; padding: 20px; }
灵活设置行列尺寸
在定义列和行时，可以混合使用像素、百分比、fr 单位来控制弹性空间。
1fr 表示一份可伸缩的空间 min-content 或 max-content 可根据内容自动调整 使用 repeat() 简化重复结构，如 repeat(3, 1fr)
例如：
grid-template-columns: 250px 1fr 200px;grid-template-rows: 60px minmax(100px, 1fr);
响应式布局建议
结合媒体查询和 grid-template，可以轻松适配不同屏幕。
在小屏幕上改为单列：
@media (max-width: 768px) { .container { grid-template-areas: “header” “sidebar” “main”; grid-template-rows: 60px auto 1fr; grid-template-columns: 1fr; }}
基本上就这些。合理使用 grid-template 能让整体布局清晰、易维护，特别适合复杂页面结构。关键是先规划好区域划分，再配合灵活的尺寸单位。不复杂但容易忽略细节，比如区域名称必须对齐、每个单元格只能属于一个区域等。
以上就是在css中如何用grid-template实现整体布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1023553.html
微信扫一扫 
支付宝扫一扫 
