CSS 多列布局：columns 与 column-span

概述

多列布局通过 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