CSS multi-column layout
The CSS multi-column layout module provides support for multi-column layouts, including support for establishing the number of columns in a layout, 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 <div> element with the class container. As the value of column-count is 3, the content is arranged into three columns of the same size.
Relationship to fragmentation
Multi-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 to control how content breaks between columns.
Reference
Properties for multi-column layout
Properties related to CSS fragmentation
Guides
- Basic concepts of multi-column layout
-
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 multi-column layout
-
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.
- Handling content breaks in multi-column layout
-
Introduction to the Fragmentation specification and how to control where column content breaks.
Specifications
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 |
See also
Other CSS layout technologies include:
- CSS flexible box layout (CSS flexbox)
- CSS grid layout