Gap multi-column
Learn multi-column layout with column-count and column-gap.
What is multi-column?
To split a long block of text into columns like a newspaper, use the column-count property. column-count: 3 divides the text into three columns; the browser balances the column heights.
The space between columns is set with column-gap. column-gap: 2rem gives the columns breathing room. For finer control you can also give column-width.
Draw a divider with column-rule
To add a divider line between columns, use the column-rule property. It works like border: width, style, and color in one line.
For example, column-rule: 1px solid #ccc; draws a thin gray line between columns. The line sits in the middle of the column gap; it never collides with the text.
Exercise Split the article into three columns
Give the .article selector three declarations: column-count: 3, column-gap: 2rem, and column-rule: 1px solid #ccc. The article will split into three columns with a thin gray divider.
Show example solution
/* split the article into three columns */
.article {
column-count: 3;
column-gap: 2rem;
column-rule: 1px solid #ccc;
}Test yourself
-
Which splits the text into a fixed three columns?
- column-count: 3
- column-width: 3
- columns: 3px
- display: column-3
Show answer
column-count: 3 — Correct. column-count: 3 splits the text into three columns.
-
Write the column-count property
.article { ____: 2; column-gap: 2rem; }Show answer
.article { column-count: 2; column-gap: 2rem; } -
Match the multi-column properties
- column-count
- Column count
- column-gap
- Column spacing
- column-rule
- Divider line
- column-width
- Column width