css grid-template-columns属性用法解析

grid-template-columns 定义网格列结构，支持固定值、百分比、fr 单位、auto、min-content、max-content 及 repeat() 函数；fr 按比例分配剩余空间，repeat() 简化重复列，结合 minmax() 实现响应式布局，如 repeat(auto-fit, minmax(150px, 1fr)) 自动调整列数与宽度。

CSS 的 grid-template-columns 属性用于定义网格容器中列的数量、大小和轨道宽度。它是 CSS Grid 布局中最核心的属性之一，直接决定网格的列结构。

基本语法与取值

grid-template-columns 接受一个用空格分隔的值列表，每个值对应一列的宽度。

常见取值包括：

• 固定长度：如

  100px

  、

  2em

  、

  5rem

• 百分比：如

  50%

  、

  25%

  ，相对于网格容器的宽度

• fr 单位：表示“分数（fraction）”，按剩余空间的比例分配
• auto：根据内容自动调整列宽
• min-content / max-content：基于内容最小或最大所需空间
• repeat() 函数：简化重复列的写法

示例：

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

这行代码创建了三列：第一列 100px 宽，第二列 200px 宽，第三列占据剩余空间。

立即学习“前端免费学习笔记（深入）”；

使用 fr 单位灵活布局

fr 是 Grid 中非常实用的单位，用于按比例分配可用空间。

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

容器被分为三等份，第一列占 1 份，第二列占 2 份，实现 1:2 的宽度比例。

混合使用时，固定值先被扣除，剩余空间再按 fr 分配。

grid-template-columns: 100px 1fr 2fr;

100px 被固定占用后，其余空间按 1:2 分给后两列。

repeat() 函数简化写法

当有多列相同宽度时，repeat() 可避免重复书写。

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

等同于

1fr 1fr 1fr

，创建三个等宽列。

支持嵌套和混合：

grid-template-columns: repeat(2, 100px 1fr) auto;

生成：100px、1fr、100px、1fr、auto 共五列。

还可以使用 auto-fill 和 auto-fit 实现响应式布局：

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

容器会尽可能多地填充最小 200px 的列，每列至少 200px，多余空间平均分配。

结合 minmax() 设置弹性列宽

minmax() 函数允许为列设置最小和最大宽度范围。

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

第一列最小 100px，最大 200px，超出部分由第二列（1fr）吸收。

常用于响应式设计，配合 repeat() 使用更强大：

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

自动适配列数，每列最小 150px，最大为 1fr，屏幕变窄时自动换行。

基本上就这些。掌握 grid-template-columns 的各种写法，能快速构建灵活、响应式的网格布局。关键是理解 fr、repeat、minmax 的组合逻辑，实际开发中非常高效。不复杂但容易忽略细节。