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.
In the following example, the
column-count property has been applied to the
<div> element with the class
container. As the value of
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.
Properties for multi-column layout
Properties related to CSS fragmentation
- 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.
|CSS Multi-column Layout Module Level 1 |
Other CSS layout technologies include:
- CSS flexible box layout (CSS flexbox)
- CSS grid layout