column-width 列宽属性

最后更新：2026-09-13

column-width column-width 列宽属性

column-width 属性用于指定多列布局中每列的理想宽度。浏览器会根据容器宽度和该值自动计算实际列数，内容会自适应填充到各列中，适合需要弹性列宽的多栏排版场景。

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

📝 语法

column-width: auto | <length>;

⚙️ 取值

值	类型	描述
`auto`	关键字	自动计算
`<length>`	类型	固定列宽

▶ 示例

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

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
column-width	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： column-width 是一个理想值，实际列宽可能会略有调整。当容器宽度改变时，列数会相应增减。

注意： 同时设置 column-width 和 column-count 时，column-count 被视为最大列数上限，实际列数取两者计算结果的较小值。

❓ 常见问题

Qcolumn-width 和 width 有什么区别？

Awidth 设置元素本身的宽度，是盒子外部尺寸；column-width 设置多列布局中每一列的理想宽度，浏览器根据容器宽度和该值自动计算列数，列数会随容器宽度变化而增减。column-width 是弹性设计，适合内容量不固定、希望自动分栏的场景；width 是固定设计。

Qcolumn-width 和 column-count 一起设置会怎样？

A同时设置时 column-count 作为列数上限，column-width 作为理想列宽，浏览器取两者约束下的最优解：按列宽计算能放几列，但不超过 column-count。如 column-width:150px; column-count:4，容器 500px 时只能放 3 列，就显示 3 列。

Qcolumn-width 的 auto 值是什么意思？

Aauto 表示列宽不由本属性决定，而是交给 column-count 或浏览器自动计算。它是默认值。只设置 column-width 而不设置 column-count 时，浏览器按指定列宽自动分列；两者都设时自动列宽被忽略，以 column-count 为准。

Q如何用 column-width 做响应式多列？

A只设置 column-width 不设 column-count，例如 column-width:250px，浏览器会根据容器宽度自动决定列数：宽屏 4~5 列、窄屏 1~2 列，无需写媒体查询即可实现列数随容器自适应的效果。这是 column-width 相比 column-count 的优势，适合阅读型内容。