grid-template-columns 定义网格列数与宽度，支持固定值、百分比、fr 弹性单位和 auto 等取值；通过 repeat() 可简化重复列，结合 minmax() 实现响应式自适应布局，如 repeat(auto-fit, minmax(120px, 1fr)) 能自动调整列数与尺寸；显式定义列时建议避免依赖隐式网格，确保布局可控，合理运用 fr、repeat 与 minmax 可构建灵活高效的响应式页面结构。
在CSS Grid布局中，grid-template-columns 是定义网格列的关键属性。它决定了容器内有多少列、每列的宽度以及如何分配空间。掌握它的使用方式，能让你快速构建灵活、响应式的页面结构。
基本语法与常用值
grid-template-columns 接受一个由空格分隔的值列表，每个值对应一列的宽度。
常见单位包括：- 固定长度：如 100px、2em，适合固定尺寸的布局区域
- 百分比：如 50%、25%，相对于容器总宽度
- fr 单位：弹性比例单位，表示可用空间的份数，比如 1fr 就是均分一份
- auto：根据内容自动调整列宽
- min-content / max-content：根据最小或最大内容需求设置宽度
示例：
grid-template-columns: 100px 1fr 2fr;
这表示三列：第一列为固定100px，第二列占1份剩余空间，第三列占2份。
立即学习“前端免费学习笔记（深入）”；
使用 repeat() 简化重复列定义
当需要多个等宽列时，手动写每个值很麻烦。repeat() 函数可简化这一过程。
- repeat(3, 1fr)：创建3个等宽列
- repeat(4, 100px)：4列，每列100px
- repeat(auto-fit, minmax(150px, 1fr))：自动填充列，每列最小150px，最大1fr，非常适合响应式卡片布局
这种写法让布局更智能，屏幕变窄时自动减少列数，无需媒体查询。
结合 minmax() 实现自适应列宽
minmax(min, max) 可为列设置宽度范围，防止列过窄或过宽。
- minmax(100px, 1fr)：列宽至少100px，最多占据1个fr空间
- minmax(max-content, 200px)：宽度从内容所需开始，但不超过200px
搭配 auto-fit 或 auto-fill 使用效果最佳：
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
实现真正“内容适配、设备适配”的流式网格。
隐式列与显式控制
grid-template-columns 定义的是显式网格列。如果子元素超出定义的列数，Grid会自动创建隐式列（由 grid-auto-columns 控制其样式）。
通常建议明确设置所需列数，避免意外布局。例如：
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 明确定义两列 */
}这样能确保结构清晰可控。
基本上就这些。合理使用 fr、repeat 和 minmax，能让 grid-template-columns 成为你布局中最强大的工具之一。不复杂但容易忽略细节，多试几次就能熟练掌握。
