在css中Grid模板列grid-template-columns详解

grid-template-columns用于定义网格列的大小和分布，支持固定值、百分比、fr弹性单位、auto及minmax()等；通过fr可实现响应式布局，repeat()简化重复列定义，minmax()设定列宽范围，组合使用可高效构建复杂网格布局。

在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() 的组合使用方式。不复杂但容易忽略细节。