CSS 多列布局：columns 与 column-span

---

title: CSS 多列布局：columns 与 column-span

keywords:

• columns
• column-count
• column-width
• column-gap
• column-span

description: 使用 CSS 多列布局进行报刊式排版与内容分栏，控制列宽与间距，并使用 column-span 实现跨栏标题与视觉分组。

categories:

• 文章资讯
• 编程技术

---

概述

多列布局通过 column-count/column-width 控制列数与宽度，column-gap 控制间距。column-span: all 用于元素跨越所有列。

用法/示例

.article { column-width: 320px; column-gap: 24px }
.article h2 { column-span: all }

工程建议

• 在响应式下调整 column-width 与间距；为长词与图片提供断行与占位策略。
• 控制跨栏元素频率，避免阅读中断；结合目录与标注提升导航性。
• 评估与网格/弹性布局间的协作关系，保持一致的版式逻辑。

参考与验证

• MDN：Multi-column — https://developer.mozilla.org/docs/Web/CSS/CSS_multicol_layout