grid-template-columns通过单位与函数实现灵活布局：1. 用px、%、fr、auto定义列宽；2. repeat()简化重复列；3. minmax()设定列宽范围；4. auto-fit与auto-fill实现动态响应式网格。
在使用 CSS Grid 布局时，grid-template-columns 是定义列结构的核心属性。它不仅决定了网格容器中每一列的宽度，还能通过灵活的单位和函数实现响应式、自适应的布局。掌握其使用技巧，能大幅提升页面排版效率。
1. 使用不同单位控制列宽
grid-template-columns 支持多种单位组合，可以根据设计需求灵活选择：
- 固定单位：如 px、em，适合固定宽度的布局（例如侧边栏）
- 百分比 %：相对于容器宽度，适合等分或比例布局
- fr 单位：代表“分数”，按剩余空间分配，是 Grid 特有的弹性单位
- auto 关键字：根据内容自动调整列宽
示例：
.container {grid-template-columns: 200px 1fr 2fr;
}
这个例子创建三列：第一列固定 200px，第二列占 1 份剩余空间，第三列占 2 份。
立即学习“前端免费学习笔记（深入）”；
2. 利用 repeat() 函数简化重复列定义
当需要定义多个等宽列时，repeat() 能大幅减少代码量。
- 基本语法：repeat(数量, 宽度)
- 可结合 fr 或 % 实现均匀分布
常见用法：
/* 创建 12 列等宽网格 */
grid-template-columns: repeat(12, 1fr);
/* 交替模式：窄-宽-窄 */
grid-template-columns: repeat(3, 100px 1fr);
3. 结合 minmax() 实现响应式列宽
使用 minmax(min, max) 可为列设置最小和最大宽度，避免内容溢出或压缩过度。
- 常用于确保列不会太窄或太宽
- 与 fr 搭配实现“弹性但有边界”的布局
示例：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));这行代码会自动填充列数，每列最小 200px，最大为 1fr，超出则换行，非常适合卡片布局。
4. 使用 auto-fit 与 auto-fill 实现动态网格
这两个关键字配合 repeat() 和 minmax()，可创建真正响应式的网格。
- auto-fit：将空余列合并到现有列中，拉伸它们填满空间
- auto-fill：保留所有可能的列槽位，即使没有内容也保持空白
对比场景：
/* 内容少时自动拉伸填满 */grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
/* 始终保留列槽，适合预留位置 */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
基本上就这些。合理运用 grid-template-columns 的单位和函数，可以轻松实现从简单布局到复杂响应式设计的过渡，减少媒体查询依赖，提升开发效率。关键是理解 fr、minmax 和 repeat 的协同逻辑。不复杂但容易忽略细节。
