编辑“︁CSS网格模板列（grid-template-columns）”︁（章节）

= CSS网格模板列（grid-template-columns） =

'''CSS网格模板列'''（grid-template-columns）是CSS网格布局（Grid Layout）模块中的核心属性之一，用于定义网格容器（grid container）中列（columns）的数量、大小及分布方式。它允许开发者精确控制网格的列布局，从而实现复杂的响应式设计。

== 基本介绍 ==

网格布局是一种二维布局系统，而`grid-template-columns`属性用于指定网格的列结构。它可以接受多种类型的值，包括固定长度（如px）、相对长度（如fr单位）、百分比（%）以及自动调整（auto）等。通过合理设置该属性，开发者可以创建灵活且自适应的布局。

语法：
<syntaxhighlight lang="css">
grid-template-columns: [列1大小] [列2大小] ... [列N大小];
</syntaxhighlight>

== 值类型与示例 ==

=== 固定长度示例 ===
使用像素（px）定义固定宽度的列：
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: 200px 300px 150px;
}
</syntaxhighlight>
此代码创建一个三列网格，宽度分别为200px、300px和150px。

=== 相对单位（fr）示例 ===
`fr`（fraction）单位按比例分配剩余空间：
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
</syntaxhighlight>
此网格将可用空间分成4等份（1+2+1），中间列占2份，两侧各占1份。

=== 混合单位示例 ===
结合固定和相对单位：
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}
</syntaxhighlight>
第一列固定为100px，剩余空间按1:2分配。

=== 重复函数（repeat()） ===
简化重复模式定义：
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
</syntaxhighlight>
等效于`1fr 1fr 1fr`，创建三个等宽列。

== 高级特性 ==

=== 命名网格线 ===
为网格线命名以实现更清晰的布局控制：
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
}
</syntaxhighlight>

=== 自动填充与适应 ===
使用`auto-fill`和`auto-fit`实现响应式布局：
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
</syntaxhighlight>
自动填充尽可能多的列（每列最小150px，最大1fr）。

== 实际应用案例 ==

=== 经典12列网格系统 ===
实现类似Bootstrap的12列布局：
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
</syntaxhighlight>

=== 杂志式布局 ===
复杂的内容排列：
<syntaxhighlight lang="css">
.magazine {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 15px;
}
</syntaxhighlight>
主内容区占2份，两个侧栏各占1份。

== 可视化表示 ==

使用Mermaid展示3列网格结构：
<mermaid>
graph LR
    A[网格容器] --> B[列1: 1fr]
    A --> C[列2: 2fr]
    A --> D[列3: 1fr]
</mermaid>

== 数学原理 ==

当使用`fr`单位时，空间分配遵循公式：
<math>
列宽 = \frac{fr值}{\sum(fr值)} \times 可用空间
</math>

例如`1fr 2fr 1fr`的分配：
<math>
列1 = \frac{1}{4} \times 可用空间
</math>
<math>
列2 = \frac{2}{4} \times 可用空间
</math>

== 浏览器兼容性 ==

大多数现代浏览器完全支持`grid-template-columns`，包括：
* Chrome 57+
* Firefox 52+
* Safari 10.1+
* Edge 16+

== 最佳实践 ==

1. 优先使用相对单位（如fr）实现响应式布局
2. 结合`minmax()`函数设置弹性范围
3. 使用命名网格线提高代码可读性
4. 在复杂布局中配合`grid-column`属性使用

== 常见问题 ==

'''Q: 为什么我的网格列没有按预期显示？'''
A: 检查容器是否设置了`display: grid`，并确认列宽总和不超过容器宽度。

'''Q: fr单位和百分比有何区别？'''
A: fr分配的是剩余空间，而百分比是基于父容器总宽度的固定比例。

== 总结 ==

`grid-template-columns`是构建现代网页布局的强大工具，通过灵活的值组合可以创建从简单到复杂的各种网格结构。掌握这一属性是学习CSS网格布局的关键步骤。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS网格布局]]