CSS Multi-column Layout - CSS: Cascading Style Sheets 编辑

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

Basic example

In the following example the column-count property has been applied to the element with a class of container. As the value of column-count is 3, the content is arranged into 3 columns of equal size.

Relationship to Fragmentation

Multiple-column Layout is closely related to Paged Media, 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. 

Reference

Multiple-column Layout Properties

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns

Related CSS Fragmentation Properties

• break-after
• break-before
• break-inside
• orphans
• widows

Guides

Basic Concepts of Multicol

An overview of the Multiple-column Layout specification

Styling Columns

How to use column rules and manage the spacing between columns.

Spanning and Balancing

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

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

Specifications

See also

Other CSS layout technologies include:

• CSS Flexible Box Layout (CSS flexbox)
• CSS Grid Layout