CSS 多列布局

在下列示例中，column-count属性应用于带有容器类的元素。因为column-count的值为3，所以内容排成等宽的 3 列。

Multiple-column Layout is closely related to Paged Media (en-US), in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore the properties now defined in the CSS Fragmentation specification are required in order to control how content breaks between columns.

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width (en-US)
• columns

• break-after
• break-before
• break-inside

多列的基本概念

多列布局的概述

设置列的样式 (en-US)

如何使用列的分隔线，以及设置列间距。

Spanning and Balancing (en-US)

How to make elements span across all columns and controlling the way columns are filled.

Handling Overflow in Multicol

What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.

Content Breaks in Multicol (en-US)

Introduction to the Fragmentation specification and how to control where column content breaks.

其它 CSS 布局方法包括：

• CSS 弹性盒子布局（CSS flexbox）
• CSS 网格布局