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

Next lesson: Summary - Modern card grid

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies