CSS Grid模板列详解

CSS Grid中的grid-template-columns是构建响应式与复杂页面布局的核心利器，它通过灵活组合固定值、百分比、fr弹性单位、auto以及minmax()和repeat()等高级函数，让开发者能精准控制列的数量、尺寸与自适应行为——无论是均分空间、按比例分配、自动适配内容，还是动态生成响应式栅格，都能以简洁声明式语法高效实现，真正释放CSS Grid在现代网页布局中的强大潜力。

在CSS Grid布局中，grid-template-columns 是一个核心属性，用于定义网格容器中列的数量、大小和分布方式。它让你能够灵活地划分网格的横向结构，是构建复杂页面布局的基础。

基本语法与常用值

grid-template-columns 接受一系列用空格分隔的值，每个值对应一列的宽度。常见取值包括：

• length：如 100px、2em，表示固定列宽
• percentage：如 50%，相对于网格容器的宽度
• fr：弹性单位，表示可用空间的份数，比如 1fr 表示均分剩余空间
• auto：自动根据内容或剩余空间分配宽度
• min-content、max-content、fit-content()：基于内容调整列宽

示例：

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

这表示三列：第一列100px，第二列200px，第三列占据剩余空间。

使用 fr 单位实现响应式布局

fr 单位是Grid中最强大的特性之一，能轻松创建等宽或按比例分布的列。

• grid-template-columns: 1fr 1fr —— 两列均分容器宽度
• grid-template-columns: 2fr 1fr —— 第一列占2份，第二列占1份
• grid-template-columns: 1fr 2fr 1fr —— 三列中中间列更宽

这种写法无需计算百分比，自动适应容器变化，适合响应式设计。

结合 repeat() 函数简化重复定义

当需要定义多个相同或有规律的列时，repeat() 函数非常实用。

• repeat(3, 1fr) —— 创建3个等宽列
• repeat(4, 100px) —— 4个100px宽的列
• repeat(2, 1fr 2fr) —— 重复模式：1fr 2fr 1fr 2fr

还可以结合其他值使用：

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

表示左右各一个100px列，中间三个等宽列。

使用 minmax() 控制列宽范围

有时希望列宽在一定范围内弹性变化，这时可用 minmax() 函数。

• minmax(100px, 1fr) —— 列宽最小100px，最大为1fr
• minmax(max-content, 200px) —— 最小为内容所需宽度，最大200px

常用于防止列过窄或过宽：

.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

这会自动创建尽可能多的列，每列至少200px，多余空间均分。

基本上就这些。掌握 grid-template-columns 的各种写法，就能高效构建从简单到复杂的网格布局，关键是理解 fr、repeat() 和 minmax() 的组合使用方式。不复杂但容易忽略细节。

终于介绍完啦！小伙伴们，这篇关于《CSS Grid模板列详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！