CSS 多列布局（column）

CSS columns 属性用来设置元素的列宽和列数。

浏览器支持情况

相关属性

• column-width: <length unit> 列的宽度。
• column-count: <number> | auto 指定元素的列数。
• columns 为 column-width 和 column-count 的简写形式
• column-rule-style 指定两列间边框的样式
• column-rule-width 指定两列间边框的厚度
• column-rule-color 指定两列间边框的颜色
• column-rule 为上面三个的简写形式，规定列之间的宽度、样式和颜色。
• column-gap 控制列之间的距离
• column-span: none | all 指定元素要跨越多少列
• column-fill: all | balanced 指定如何填充列

您可以使用 break-before，break-after 或者 break-inside 来如何控制每一列中的内容显示。

默认情况下，列与内容保持平衡。如果您希望列不平衡，可以使用 column-fill: auto 进行设置。其默认行为为 column-fill: balanced。

<