Nearby lessons
13 of 15CSS: 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
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
3οΈβ£ column-gap for spacing
column-gap sets the space between columns.
Code Example
PREVIEW READY
4οΈβ£ column-rule for line between columns
column-rule adds a line between columns with defined width, style, and color.
Code Example
PREVIEW READY
5οΈβ£ column-span for element spanning columns
column-span allows an element like a heading to span across all columns.
Code Example
PREVIEW READY
π§ Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!CSS - Resize Property