隐式列轨道属性

最后更新：2026-09-13

grid-auto-columns 隐式列轨道属性

grid-auto-columns 用于控制网格容器中隐式生成的列轨道的宽度。当网格项被放置到 grid-template-columns 未显式定义的列位置时，会自动创建隐式列，该属性决定了这些自动列的尺寸。它在处理动态内容或不确定数量网格项时非常有用。

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

📝 语法

grid-auto-columns: <track-size>;

⚙️ 取值

值	类型	描述
`auto`	关键字	自动计算
`<length> \| <percentage>`	类型	固定自动列宽
`minmax()`	函数	最小最大值

▶ 示例

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

▶ 试一试

🌐 浏览器支持

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

提示： 隐式列的产生通常是因为网格项被显式放置到了显式网格之外的列位置。

提示： 使用 minmax(100px, auto) 可以让隐式列既有最小宽度，又能根据内容自动伸展。

❓ 常见问题

Qgrid-auto-columns 和 grid-template-columns 什么时候会同时生效？

A当网格项被放置到 grid-template-columns 未显式定义的列位置时就会产生隐式列，此时 grid-auto-columns 决定这些额外列的宽度。例如只定义了两列，第 3 个网格项（自动放置或 grid-column 定位到第 3 列）就会落入隐式列。显式列与隐式列可同时存在，各自采用不同的宽度规则。

Q如何让所有列宽度一致但数量不固定？

A使用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，浏览器根据容器宽度自动决定列数，每列至少 200px、有剩余空间时伸展。这是响应式网格的标准写法，配合 gap 即可实现列数自适应、宽度一致的网格，无需媒体查询。

Q什么情况下会产生隐式列？

A当网格项被放到显式列之外时产生隐式列。例如容器只有两列，第 3 个网格项自动放置时落到第 3 列，或通过 grid-column: 4 定位到第 4 列，这些列就是隐式列，宽度由 grid-auto-columns 决定。横向滚动列表常用此特性：显式第一列，其余交给 grid-auto-columns。