网格列轨道属性

最后更新：2026-09-13

grid-template-columns 网格列轨道属性

grid-template-columns 用于定义网格容器中列轨道的数量和宽度。通过指定每个列轨道的尺寸，你可以精确控制网格的列结构，是 CSS Grid 布局中最核心的设置之一。它支持固定长度、百分比、弹性单位 fr 以及 repeat()、minmax() 等强大函数。

分类
初始值	none
继承	否
适用于	all
可动画	discrete
CSS 版本	CSS3
状态	标准

📝 语法

grid-template-columns: none | <track-list> | <auto-track-list>;

⚙️ 取值

值	类型	描述
`none`	关键字	无显式列轨道
`<track-list> \| <auto-track-list>`	类型	轨道列表
`repeat()`	函数	重复轨道定义

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
grid-template-columns	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： fr（fraction）单位表示可用空间的一份，例如 1fr 2fr 表示两列按 1:2 比例分配剩余空间。

提示： repeat(3, 1fr) 等价于 1fr 1fr 1fr，在需要大量重复轨道时更简洁。

❓ 常见问题

Qgrid-template-columns 和 grid-auto-columns 有什么区别？

Agrid-template-columns 定义显式声明的列轨道，是网格的主结构；grid-auto-columns 控制隐式列的宽度——当网格项被放到超出显式列的位置时，浏览器自动创建的额外列就属于隐式列。例如只定义两列，第 3 个及以后的网格项会进入由 grid-auto-columns 控制的隐式列。

Qminmax(200px, 1fr) 是什么意思？

Aminmax() 指定轨道尺寸范围：最小值 200px、最大值 1fr，即该列至少 200px，空间充足时按 1fr 伸展，不足时保持 200px。常配合 repeat(auto-fill, minmax(200px, 1fr)) 让浏览器按容器宽度自动决定列数，实现无需媒体查询的响应式网格。

Qauto-fill 和 auto-fit 有什么区别？

A两者都配合 repeat() 让列数随容器宽度变化。auto-fill 会尽量创建更多列，即使没有内容放置也保留空轨道，列宽稳定；auto-fit 会把空轨道折叠为 0，让有内容的列自动拉伸占满整行。同样宽度下 auto-fit 的内容列更宽，适合卡片自适应铺满的场景；auto-fill 更适合希望保持固定列宽的布局。