多列布局 (Multi-column)
使用CSS column系列属性将内容分成多列，类似报纸排版。
核心属性
| 属性 | 说明 | 常用值 |
|---|---|---|
column-count |
列数 | 2 / 3 / 4 |
column-width |
列宽 | 200px / 20em |
column-gap |
列间距 | 20px / 2em |
column-rule |
分隔线 | 1px solid #ccc |
应用场景
适用：文章分栏、瀑布流图片、文本报纸式排版
示意图
这是一段比较长的文字，会自动分成三栏显示。使用column-count: 3可以轻松实现报纸式的多栏布局效果。
内容会从上到下、从左到右依次填充每一栏，实现类似报纸杂志的排版效果。
column-count: 3
实际例子 - 报纸文章排版
今日新闻
这是一个使用多列布局的典型案例。在报纸和杂志中，我们经常可以看到这种分栏排版的方式。它特别适合长篇文章的阅读，可以让读者的眼睛不需要移动太远的距离就能找到下一行。
使用CSS的column-count属性可以轻松实现这种效果。内容会自动从第一列开始填充，然后继续填充第二列、第三列等，非常方便。
这种布局方式的优点是简单易用，不需要复杂的HTML结构，仅仅是几个CSS属性就可以实现报纸杂志般的排版效果。
.newspaper {
column-count: 2;
column-gap: 24px;
column-rule: 1px solid #ccc;
}