CSS网格模板列（grid-template-columns）[编辑 | 编辑源代码]

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

基本介绍[编辑 | 编辑源代码]

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

语法：

grid-template-columns: [列1大小] [列2大小] ... [列N大小];

使用像素（px）定义固定宽度的列：

.container {
  display: grid;
  grid-template-columns: 200px 300px 150px;
}

此代码创建一个三列网格，宽度分别为200px、300px和150px。

`fr`（fraction）单位按比例分配剩余空间：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

此网格将可用空间分成4等份（1+2+1），中间列占2份，两侧各占1份。

结合固定和相对单位：

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

第一列固定为100px，剩余空间按1:2分配。

简化重复模式定义：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

等效于`1fr 1fr 1fr`，创建三个等宽列。

为网格线命名以实现更清晰的布局控制：

.container {
  display: grid;
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
}

使用`auto-fill`和`auto-fit`实现响应式布局：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

自动填充尽可能多的列（每列最小150px，最大1fr）。

实现类似Bootstrap的12列布局：

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

复杂的内容排列：

.magazine {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 15px;
}

主内容区占2份，两个侧栏各占1份。

使用Mermaid展示3列网格结构：

当使用`fr`单位时，空间分配遵循公式： 解析失败 (语法错误): {\displaystyle 列宽 = \frac{fr值}{\sum(fr值)} \times 可用空间 }

例如`1fr 2fr 1fr`的分配： 解析失败 (语法错误): {\displaystyle 列1 = \frac{1}{4} \times 可用空间 } 解析失败 (语法错误): {\displaystyle 列2 = \frac{2}{4} \times 可用空间 }

大多数现代浏览器完全支持`grid-template-columns`，包括：

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

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

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

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