The CSS multi-column layout module lets you divide content across multiple columns. By using the properties in this module, you can define the preferred number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.
To see the code for this columned layout, view the source on GitHub.
Note: Bear in mind that setting container height and line length can pose challenges for people with visual or cognitive disabilities. WCAG Success Criterion 1.4.8 states that even when the text size is doubled, content should not need to be scrolled.
- 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 control 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 |