CSS网格布局是现代前端布局的重要方案，grid-template-columns属性用于定义网格容器的列轨道大小，直接决定网格布局的列结构和宽度分配规则，是网格布局中最常用的属性之一。
grid-template-columns基础语法
该属性是网格容器的属性，取值为空格分隔的轨道大小列表，每个值对应一列的宽度，列表长度就是网格的列数。基础语法如下：
.container {
display: grid;
/* 定义3列，每列宽度200px */
grid-template-columns: 200px 200px 200px;
}
上述代码会创建一个3列的网格，每列固定宽度200px，当容器宽度大于600px时，多余空间会留白，小于600px时内容会溢出。
常用取值类型
固定像素取值
使用固定像素值定义列宽，列宽不会随容器大小变化，适合需要固定尺寸的元素布局，比如侧边栏固定宽度场景。
/* 左侧边栏固定200px，右侧内容区固定800px */
.side-layout {
display: grid;
grid-template-columns: 200px 800px;
}
百分比取值
百分比基于网格容器的宽度计算，列宽会随容器宽度变化，适合需要按比例分配空间的布局。
/* 两列各占容器宽度的50% */
.half-layout {
display: grid;
grid-template-columns: 50% 50%;
}
fr单位取值
fr是网格布局特有的分数单位，代表剩余可用空间的分配比例，会先扣除固定尺寸列的空间，再按比例分配剩余空间，适合弹性布局场景。
/* 左侧固定200px，右侧剩余空间分3份，内容区占2份，空白区占1份 */
.flex-layout {
display: grid;
grid-template-columns: 200px 2fr 1fr;
}
auto取值
auto表示列宽由内容自然撑开，或者占据剩余可用空间，具体表现取决于其他列的取值情况。
/* 第一列内容撑开，第二列占剩余空间 */
.auto-layout {
display: grid;
grid-template-columns: auto 1fr;
}
实用定义技巧
使用repeat函数简化重复定义
当多列取值相同时，可以使用repeat(重复次数, 列宽)函数简化代码，避免重复书写相同的值。
/* 等价于 grid-template-columns: 1fr 1fr 1fr 1fr */
.equal-four-col {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
/* 等价于 grid-template-columns: 200px 1fr 200px 1fr */
.mixed-repeat {
display: grid;
grid-template-columns: repeat(2, 200px 1fr);
}
结合minmax实现自适应列宽
使用minmax(最小值, 最大值)函数可以定义列宽的取值范围，列宽会在最小值和最大值之间自适应，提升布局的灵活性。
/* 列宽最小200px，最大占1份剩余空间，容器变小时列宽不会小于200px */
.adaptive-col {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
使用auto-fill和auto-fit实现自动列数
auto-fill会根据容器宽度自动计算能放下多少列，尽可能多放列；auto-fit会合并空列，让现有列占据更多空间，适合响应式布局。
/* 容器宽度足够时放多列，每列最小200px，最大1fr */
.auto-fill-layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
/* 和auto-fill类似，但空列会被折叠，现有列会扩展填充空间 */
.auto-fit-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
常见问题说明
如果定义的列宽总和超过容器宽度，网格会默认溢出容器，不会自动换行，需要配合grid-auto-flow: row或者调整列宽取值避免溢出。另外，fr单位和固定单位混合使用时，会先计算固定单位的总宽度，再用剩余空间分配fr单位的占比，这个计算逻辑需要特别注意。
注意：grid-template-columns只定义列轨道的初始大小，后续可以通过grid-column属性调整单个网格项跨越的列数，实现更复杂的布局效果。
grid-template-columnsCSS_grid网格布局列定义修改时间：2026-07-08 06:36:24