Nearby lessons

13 of 15

CSS: Multi-Column Layout

πŸ“Œ What is CSS Multi-Column Layout?

The Multi-Column Layout in CSS allows content to be divided into multiple columns, similar to how text flows in newspapers or magazines. It uses properties like column-count, column-width, column-gap, column-rule, etc., to control layout behavior.

1️⃣ Basic Multi-Column using column-count

column-count specifies the number of columns an element should be divided into.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

2️⃣ Using column-width

column-width sets an ideal width for the columns. The browser will then fit as many columns as it can without exceeding the width.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

3️⃣ column-gap for spacing

column-gap sets the space between columns.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

4️⃣ column-rule for line between columns

column-rule adds a line between columns with defined width, style, and color.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

5️⃣ column-span for element spanning columns

column-span allows an element like a heading to span across all columns.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!CSS - Resize Property