column-count 列数属性

最后更新：2026-09-13

column-count column-count 列数属性

column-count 属性用于指定元素内容被分割成的列数。它是 CSS 多列布局的一部分，常与 column-gap、column-rule 配合使用，实现类似报纸的多栏排版效果。

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

📝 语法

column-count: auto | <integer>;

⚙️ 取值

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

▶ 示例

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

▶ 试一试

🌐 浏览器支持

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

提示： 当同时设置 column-count 和 column-width 时，column-count 会被视为最大列数，实际列数可能更少。

注意： 列数过多会导致每列过窄，影响阅读。建议根据内容长度和容器宽度合理设置列数，通常 2~4 列较为合适。

❓ 常见问题

Qcolumn-count 和 column-width 哪个优先？

A两者同时设置时，column-count 作为列数上限：浏览器按 column-width 计算能容纳几列，列数不超过 column-count。如 column-width:200px; column-count:3 在 700px 容器可放 3 列；容器只有 450px 时只放 2 列，不会强行塞 3 列。

Qcolumn-count 设置为 3 为什么不生效？

A可能原因：1）内容太少，不足以填满 3 列时浏览器只显示实际需要的列数；2）容器高度/宽度受限，放不下 3 列；3）同时设置了 column-width，列数被其约束为更少；4）旧浏览器不支持该属性。多列布局是内容驱动的，列数是目标值而非强制值，内容多时自然分满。

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

Aauto 表示列数不由本属性决定，交给 column-width 或浏览器自动计算：设了 column-width 按列宽自动算列数；都没设则保持单列。auto 是默认值，单独写 column-count:auto 无效果，配合 column-width 才能发挥自动分列能力。

Q如何控制多列之间的间距？

A用 column-gap 设置列间距（如 column-gap:24px），用 column-rule 设置列间分隔线（如 column-rule:1px solid #ccc）。这两个属性只对多列容器生效。列间距推荐 24px~40px 或 1.5em~2em，过小两列文字难以区分，过大浪费空间并打断阅读视线。