什么是 CSS grid-template-columns 属性？
在现代网页布局中，CSS Grid 布局系统已经成为构建复杂页面结构的首选方案。它像一张无形的网格地图，让你可以精准控制元素在页面中的位置和大小。而 grid-template-columns 属性，正是这张地图的“列定义说明书”。
这个属性用于定义 Grid 容器中每一列的宽度。你可以把它想象成在一张白纸上画竖线来划分区域，每一条竖线的位置决定了列的宽度。通过它，你可以轻松实现响应式布局，比如让一个页面在手机上显示为单列，在电脑上变成三列甚至四列。
它通常用在 display: grid 的容器上，与 grid-template-rows 一起构成网格的骨架。理解这个属性，是掌握 CSS Grid 的第一步。
基本语法与使用方式
grid-template-columns 的语法非常直观。它接收一个由空格分隔的值列表，每个值代表一列的宽度。
.container {
display: grid;
/* 定义三列，每列宽度为 100px */
grid-template-columns: 100px 100px 100px;
}
上面这段代码创建了一个有三列的网格，每列宽 100 像素。如果你有三个子元素，它们会自动按顺序填入这三列中。
更灵活的方式是使用相对单位。比如用 fr 单位，它表示“分数单位”，代表网格容器可用空间的占比。
.container {
display: grid;
/* 第一列占 1 份，第二列占 2 份，第三列占 1 份 */
grid-template-columns: 1fr 2fr 1fr;
}
这里，容器的总可用宽度被分成 4 份（1+2+1），第一列占 1/4，第二列占 2/4（即一半），第三列占 1/4。这种写法特别适合响应式布局，因为列宽会根据容器大小自动调整。
💡 小贴士：
fr是“fraction”的缩写，中文可以理解为“占比单位”。它让列宽不再死板，而是“有弹性”的。
使用关键词定义列宽
除了像素和分数，grid-template-columns 还支持一些关键词，让布局更语义化。
auto 关键词
auto 表示列的宽度由内容自动决定。适用于内容宽度不确定的场景。
.container {
display: grid;
grid-template-columns: auto 1fr auto;
}
这个例子中，第一列和最后一列的宽度由内容决定，中间列占剩余空间。适合用于侧边栏 + 主内容 + 侧边栏的布局，比如博客页面。
minmax() 函数
minmax() 是一个非常强大的函数，用于设置列宽的最小值和最大值。
.container {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(100px, 200px) auto;
}
- 第一列：最小 200px，最大占 1fr（即尽可能占满）
- 第二列：最小 100px，最大 200px
- 第三列：由内容决定
这个函数特别适合创建“有弹性但不无限制”的列。比如你不想让某列太窄，但也不想它占太多空间。
repeat() 函数
当你需要重复定义相同的列宽时，repeat() 能大大简化代码。
.container {
display: grid;
/* 创建 6 列，每列宽 100px */
grid-template-columns: repeat(6, 100px);
}
你也可以结合 fr 使用：
.container {
display: grid;
/* 创建 4 列，每列占 1 份，均分空间 */
grid-template-columns: repeat(4, 1fr);
}
repeat() 使得代码更简洁，也更容易维护。
实际案例：创建响应式卡片布局
我们来做一个真实场景：一个新闻卡片列表，需要在不同设备上显示不同列数。
<div class="card-grid">
<div class="card">新闻 1</div>
<div class="card">新闻 2</div>
<div class="card">新闻 3</div>
<div class="card">新闻 4</div>
<div class="card">新闻 5</div>
<div class="card">新闻 6</div>
</div>
.card-grid {
display: grid;
/* 在桌面端使用 3 列布局 */
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
/* 在手机端切换为 1 列 */
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
}
.card {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 15px;
text-align: center;
border-radius: 8px;
}
在这个例子中，grid-template-columns 被用来定义不同屏幕下的列数。桌面端是三列，手机端是单列。这种写法简洁高效，是响应式布局的典范。
✅ 注意：
gap属性用于设置网格项之间的间距，与grid-template-columns无关，但常配合使用。
高级技巧：自适应与弹性布局结合
有时候，我们希望某些列始终固定宽度，而其他列自适应。这时可以结合 auto 和 fr。
.container {
display: grid;
/* 左侧固定 200px，右侧占剩余空间 */
grid-template-columns: 200px 1fr;
gap: 15px;
}
这个布局常用于后台管理系统：左侧是导航菜单，宽度固定，右侧是内容区域，自动填充剩余空间。
更复杂的例子是创建“三栏布局”：
.container {
display: grid;
/* 左侧 200px，中间自适应，右侧 300px */
grid-template-columns: 200px 1fr 300px;
gap: 20px;
}
这种布局在网页设计中非常常见，grid-template-columns 让它变得简单清晰。
常见问题与注意事项
在使用 grid-template-columns 时，有几个坑需要避开。
列数必须与子元素匹配吗？
不需要。你可以定义 4 列，但只放 3 个子元素，它们会依次填入前 3 列。第 4 列会空着。如果子元素超过列数，多余的元素会自动进入下一行。
minmax() 中的最小值和最大值怎么选？
建议根据内容类型选择。比如导航栏，最小值设为 150px，防止太窄；最大值设为 250px，避免占太多空间。
fr 单位在子元素内容多时会怎么表现？
fr 是按比例分配剩余空间的，即使某个元素内容很多，它也不会“撑破”容器。但如果内容特别长，可能需要设置 word-wrap: break-word 防止溢出。
如何让列等宽？
使用 repeat() 和 1fr：
.container {
grid-template-columns: repeat(4, 1fr);
}
这样四列就会均分容器宽度。
总结
grid-template-columns 属性是 CSS Grid 布局的核心之一。它让你可以精确控制网格的列结构，从简单的固定宽度到复杂的响应式布局都能轻松实现。
通过学习 auto、fr、minmax() 和 repeat()，你可以构建出既美观又实用的页面结构。无论是博客、仪表盘还是电商列表，这个属性都能派上用场。
掌握它，意味着你真正迈入了现代网页布局的大门。不要害怕试错，多写几行代码，你就会发现，原来布局也可以这么优雅。