CSS 多列布局（CSS Multi-column Layout）
03-css2026/11/14
CSS 多列布局允许文本内容像报纸一样在多列中流动，非常适合创建杂志式的布局
主要属性
column-count
指定列的数量
.container {
column-count: 3; /* 固定3列 */
}
column-width
指定每列的理想宽度。
.container {
column-width: 200px; /* 每列最小宽度200px */
}
columns（简写属性）
同时设置column-count和column-width。
.container {
columns: 3 200px; /* 列数 宽度 */
}
列间距和分隔线
column-gap
设置列之间的间距。
.container {
column-gap: 40px; /* 固定间距 */
column-gap: 2em; /* 相对单位 */
column-gap: normal; /* 默认值，通常是1em */
}
column-rule
设置列之间的分隔线（类似 border）。
.container {
/* 简写 */
column-rule: 2px solid #ccc;
/* 分开设置 */
column-rule-width: 2px;
column-rule-style: solid;
column-rule-color: #ccc;
/* 更多样式 */
column-rule: 3px dotted red;
column-rule: 1px dashed rgba(0, 0, 0, 0.5);
}
跨列控制
column-span
允许元素跨越多列。
h2 {
column-span: all; /* 跨所有列 */
column-span: none; /* 不跨列（默认） */
}
break-inside
控制元素内部是否允许断列。
.card {
break-inside: avoid; /* 避免在元素内部断列 */
break-inside: avoid-column; /* 避免在列中断开 */
break-inside: auto; /* 默认，允许断开 */
}
break-before / break-after
控制元素前后的断列行为。
h2 {
break-before: column; /* 在h2前断列 */
break-after: avoid; /* 避免在h2后断列 */
}
列的高度和平衡
column-fill
控制列的内容分布方式。
.container {
height: 400px; /* 必须设置高度 */
column-fill: auto; /* 按顺序填充，可能列高度不同 */
column-fill: balance; /* 尽量平衡各列高度（默认） */
column-fill: balance-all; /* 平衡所有列（实验性） */
}
完整示例
示例 1：基础多列布局
.article {
columns: 3 250px; /* 最多3列，每列至少250px */
column-gap: 40px; /* 列间距40px */
column-rule: 1px solid #ddd; /* 灰色分隔线 */
padding: 20px;
}
/* 标题跨列 */
.article h1 {
column-span: all;
text-align: center;
margin-bottom: 30px;
}
/* 图片不断开 */
.article img {
break-inside: avoid;
max-width: 100%;
margin: 10px 0;
}