columns 多列布局简写属性

最后更新：2026-09-13

columns columns 多列布局简写属性

columns 是 column-count 和 column-width 的简写属性，用于将元素内容自动分割成多列显示，类似于报纸排版的效果。它常用于长文本内容的多栏展示，提升阅读体验。

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

📝 语法

columns: auto | <integer> || auto | <length>;

⚙️ 取值

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

▶ 示例

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

▶ 试一试

🌐 浏览器支持

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

提示： columns 是 column-count 和 column-width 的简写，若只写一个值，浏览器会根据写法自动判断是列数还是列宽。

注意： 多列布局需要设置明确的高度或足够的内容才能看到分列效果，否则内容可能仍在一列中显示。

❓ 常见问题

Qcolumns 和 Flexbox 多列有什么区别？

Acolumns（CSS 多列布局）是内容自动从一列流到下一列，类似报纸排版，同一段文字会被自动拆分到各列，阅读顺序连续；Flexbox 是让每个子元素成为独立的一列，子元素之间没有内容流动关系，各自作为一个整体。需要连续文本分栏用 columns，需要把子元素横向排列用 flex。

Q如何让标题跨所有列显示？

A给标题元素设置 column-span:all，即可让标题横跨所有列，正文仍在下方分列显示。这是多列文章最常用的结构：标题 + 分栏正文。注意 column-span 只有 none 和 all 两个值，无法指定跨几列；标题需要作为多列容器的直接子元素才能生效。

Qcolumns 简写属性怎么理解？

Acolumns 是 column-count 和 column-width 的简写，写一个值时浏览器自动判断：整数（columns:3）当列数，长度值（columns:200px）当列宽。两个值可同时写，如 columns: 200px 3 表示列宽约 200px、最多 3 列。让多列设置一行搞定。

Q多列布局的浏览器兼容性如何？

A现代浏览器对 columns、column-count、column-gap、column-rule 支持良好，Chrome/Edge/Firefox/Safari 均已支持。column-span:all 需较新版本，旧浏览器中多列会退化为单列显示，内容仍完整，属于渐进增强式的安全降级，可放心使用。