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 的组合逻辑，实际开发中非常高效。不复杂但容易忽略细节。
