CSS Multi-column Layout
The CSS Multi-column Layout Module allows easy definition of multiple columns of text - just like in newspapers:
Multi Column
CSS Multi-column Properties
In this chapter you will learn about the following multi-column properties:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
CSS Create Multiple Columns
The CSS column-count property specifies the number of columns an element should be divided into.
Example
div
{
column-count: 3;
}
CSS Column Gap
The CSS column-gap property specifies the space between the columns.
Example
div
{
column-gap: 40px;
}
Column Subpages
Continue learning about CSS multiple columns:
- Column Rules - column-rule, column-span, column-width
CSS Multi-columns Properties
The following table lists all the multi-columns properties:
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |
