CSS中的网格布局（Grid Layout）网格模板（grid-template）简写属性详解

描述：
grid-template是CSS网格布局中的一个简写属性，用于同时定义网格容器中的行轨道（rows）、列轨道（columns）和网格区域（areas）。它结合了grid-template-rows、grid-template-columns和grid-template-areas三个独立属性的功能，允许开发者以更简洁的方式定义网格结构。

解题过程：

1. 基本语法结构
grid-template属性的完整语法包含三个部分，按特定顺序组合：

grid-template: <grid-template-rows> / <grid-template-columns>;

或者包含网格区域定义：

grid-template: <grid-template-areas> <grid-template-rows> / <grid-template-columns>;

2. 单独定义行和列轨道
最简单的用法是只定义行和列轨道尺寸，使用斜杠(/)分隔：

.container {
  grid-template: 100px 200px / 1fr 2fr;
}

这等价于：

.container {
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr;
}

创建了一个2行2列的网格，第一行高100px，第二行高200px；第一列宽1份，第二列宽2份。

3. 使用repeat()函数简化重复模式
当需要重复相同的轨道尺寸时，可以使用repeat()函数：

.container {
  grid-template: repeat(3, 100px) / repeat(4, 1fr);
}

这创建了3行（每行100px高）和4列（每列等宽）的网格。repeat(3, 100px)表示重复3次100px的行高。

4. 定义网格区域
grid-template更强大的功能是可以同时定义命名的网格区域：

.container {
  grid-template:
    "header header header" 80px
    "sidebar content ads" 1fr
    "footer footer footer" 60px
    / 200px 1fr 150px;
}

这种语法结构包含：

• 网格区域名称（用引号包围）
• 每行的高度值
• 斜杠后的列宽度值

5. 语法解析细节

• 区域命名：每行用引号定义该行中每个单元格的区域名称，相同名称的单元格属于同一区域
• 行高指定：引号后紧跟该行的高度值（如80px、1fr等）
• 列宽指定：所有行定义完成后，用斜杠分隔，后面是各列的宽度值
• 点号(.)使用：用点号表示该单元格不属于任何命名区域（留空）

6. 实际应用示例

.page-layout {
  grid-template:
    "nav    nav    nav"    50px
    "side   main   main"   1fr
    "foot   foot   foot"   30px
    / 100px 1fr 2fr;
}

这个定义创建了：

• 第一行：nav区域跨越3列，高50px
• 第二行：side区域占第一列，main区域跨越第2-3列，高度为剩余空间
• 第三行：foot区域跨越3列，高30px
• 列分布：第一列100px，第二列1份，第三列2份

7. 注意事项

• 如果只提供行轨道定义，列轨道会设置为none（即隐式网格）
• 使用网格区域时，必须确保每行的区域名称数量与列数一致
• grid-template会重置grid-template-rows、grid-template-columns和grid-template-areas属性
• 不能用于设置隐式网格属性（如grid-auto-rows），这些需要单独设置

8. 浏览器兼容性
现代浏览器基本都支持grid-template，但在旧版浏览器中可能需要使用-ms-前缀或回退布局方案。