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.
CSS Multi-column Layout
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
Related CSS Fragmentation Properties
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
Specification |
---|
CSS Multi-column Layout Module Level 2 |
See also
Other CSS layout technologies include:
- CSS Flexible Box Layout (CSS flexbox)
- CSS Grid Layout
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns