grid-template是CSS中用于定义网格行、列和区域的简写属性，可结合grid-template-areas实现直观布局。通过字符串命名区域（如"header header"），配合fr、auto、minmax()等单位，能快速构建响应式多区域界面。示例中容器分为三行两列，头部高80px、页脚60px，侧边栏宽200px，主内容占剩余空间；移动端可用媒体查询改为单列布局，提升可维护性与灵活性。
在CSS中，grid-template 是一个简写属性，用于定义网格容器中的行、列以及区域布局。它能帮助你快速构建复杂的页面结构，比如多区域仪表盘、响应式布局等。
grid-template 属性详解
grid-template 可以同时设置 grid-template-rows、grid-template-columns 和 grid-template-areas。语法如下：
或使用区域命名：
grid-template: [命名部分];
最强大的用法是结合 grid-template-areas 来可视化布局。
使用 grid-template-areas 创建直观布局
通过为网格区域命名，你可以像画图一样设计页面结构。
立即学习“前端免费学习笔记（深入）”；
示例：创建一个典型的网页布局（头部、侧边栏、主内容、页脚）
.container {display: grid;
grid-template:
"header header" 80px
"sidebar main" 1fr
"footer footer" 60px /
200px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
说明：
- 字符串行定义了每一行的区域分布和高度（如 80px、1fr）
- / 后面是列宽度：第一列 200px，第二列占满剩余空间
- 重复名称可扩展区域，比如 "header header" 表示 header 占两列
灵活控制行与列尺寸
你可以混合使用不同单位来适应内容或屏幕变化。
常用单位：
- fr：可用空间的份数（如 2fr 1fr 表示两列按 2:1 分配）
- auto：根据内容自动调整
- 固定值：px、rem 等
- minmax()：设定最小最大范围，例如 minmax(100px, 1fr)
例子：让主内容区至少 300px，其余由侧边栏自适应
grid-template-columns: 200px minmax(300px, 1fr);实际应用建议
构建复杂版面时，推荐以下步骤：
- 先用纸笔或工具画出区域草图
- 为每个区域命名（如 header、nav、content、aside、footer）
- 使用 grid-template-areas 描述整体结构
- 配合 fr、minmax 实现响应性
- 在不同断点用媒体查询调整 grid-template 定义
例如移动端可以改为单列：
@media (max-width: 768px) {.container {
grid-template:
"header" 80px
"sidebar" auto
"main" 1fr
"footer" 60px /
1fr;
}
}
基本上就这些。grid-template 配合命名区域，能让复杂布局变得清晰易维护。关键在于合理划分区域并灵活运用尺寸单位。
