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

一、属性描述
grid-template是CSS网格布局中的核心属性，用于一次性定义网格容器的行轨道尺寸、列轨道尺寸和网格区域。它是grid-template-rows、grid-template-columns和grid-template-areas三个属性的简写形式。

二、属性语法

grid-template: none | [行定义] / [列定义] | [区域定义] [行定义] / [列定义];

三、基本用法详解

步骤1：定义行和列轨道
最简单的用法是定义行和列的尺寸：

.container {
  grid-template: 100px 200px / 1fr 2fr; /* 两行高100px和200px，两列比例为1:2 */
}

等价于：

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

步骤2：使用repeat()函数简化重复模式
当需要多个相同尺寸的轨道时：

.container {
  grid-template: repeat(3, 100px) / repeat(4, 1fr); /* 3行100px，4列等宽 */
}

步骤3：混合使用不同单位
可以组合使用固定单位、弹性单位和自动尺寸：

.container {
  grid-template: 80px auto 120px / 200px minmax(100px, 1fr) 2fr;
}

• auto关键字让行高根据内容自适应
• minmax()函数定义尺寸范围（最小100px，最大1fr）

四、网格区域定义详解

步骤4：创建命名的网格区域
通过grid-template可以直观地定义页面布局结构：

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

解析说明：

• 第一行：header区域跨越3列，高度80px
• 第二行：sidebar、content、ads三列，高度1fr（剩余空间）
• 第三行：footer区域跨越3列，高度60px
• 列定义：200px 1fr 150px（三列宽度）

步骤5：网格项与区域关联
定义好区域后，网格项通过grid-area属性关联：

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.ads { grid-area: ads; }
.footer { grid-area: footer; }

五、高级特性详解

步骤6：使用线名称
在定义轨道时可以同时命名网格线：

.container {
  grid-template:
    [row1-start] "header header" 100px [row1-end]
    [row2-start] "sidebar main" 1fr [row2-end]
    / [col1-start] 200px [col2-start] 1fr [col-end];
}

这样可以在定位网格项时使用有意义的线名称。

步骤7：响应式布局应用
结合媒体查询实现响应式：

.container {
  grid-template: auto / 1fr; /* 移动端：单列布局 */
}

@media (min-width: 768px) {
  .container {
    grid-template:
      "header header" auto
      "sidebar content" 1fr
      / 250px 1fr; /* 平板端：两列布局 */
  }
}

六、注意事项

1. 隐式网格：当网格项超出明确定义的区域时，浏览器会自动创建隐式网格轨道
2. none值：grid-template: none表示三子属性均为初始值，生成隐式网格
3. 层叠定义：区域名称可以重复使用来创建复杂布局
4. 点号(.)：在区域定义中使用点号表示该网格单元格不被任何命名区域占用

七、实际应用示例

.dashboard {
  grid-template:
    "nav    header header" 60px
    "nav    main   aside"  1fr
    "footer footer footer" 40px
    / 200px 1fr   180px;
}

这个示例创建了一个完整的仪表板布局，清晰地展示了页面的结构关系。