Flash cards
Review the key moves
What is the main idea behind CSS Multiple Columns?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-count: 3;Put the learning moves in the order that makes the concept easiest to apply.
CSS Multi-column Layout
The CSS Multi-column Layout Module allows easy definition of multiple columns of text - just like in newspapers:
CSS Multi-column Properties
In this chapter you will learn about the following multi-column properties:
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-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;
}Live preview
CSS Column Gap
The CSS column-gap property specifies the space between the columns.
Example
div {
column-gap: 40px;
}Live preview
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 |