CSS 多列布局

column-count/column-gap/column-rule 报纸式排版 · 难度：入门 · +15XP

CSS columns —— 报纸式多列布局

你有没有看过报纸？内容自动从第一栏底部流到第二栏顶部。CSS columns就是做这种效果的，非常适合文章类内容。

基本用法

.article {
  column-count: 3;        /* 分成3列 */
  column-gap: 40px;       /* 列间距 */
  column-rule: 1px solid #ddd;  /* 列之间的分割线 */
}

按宽度自动分配列数

.article {
  column-width: 250px;  /* 每列至少250px宽，浏览器自动算列数 */
}

防止元素跨列断裂

.article h2 {
  break-after: avoid;     /* 标题后不要分列 */
  break-inside: avoid;    /* 元素内部不要分列 */
}

动手练习

1. 基础练习：把一篇长文章用columns分成3列显示。
2. 进阶应用：做一个杂志风格的首页——文章列表分成3列，配上column-rule分割线。
3. 项目实战：用columns+break-inside:avoid做一个不会断裂的卡片列表布局。