Lesson 63: CSS Multiple Columns · Building Newspaper-Style Layouts from Scratch

Phase 1 of 13

Lesson Introduction

Have you ever opened a newspaper, a printed magazine, or a Wikipedia article and noticed the text flows in neat side-by-side vertical strips · like this?

code

┌──────────────────────────────────────────────────────┐
│           ARTICLE HEADING ACROSS THE TOP             │
├─────────────────┬──────────────┬─────────────────────┤
│ Lorem ipsum     │ sed diam     │ Ut wisi enim ad     │
│ dolor sit amet, │ nonummy nibh │ minim veniam, quis  │
│ consectetuer    │ euismod      │ nostrud exerci...   │
│ adipiscing...   │ tincidunt... │                     │
└─────────────────┴──────────────┴─────────────────────┘

That is called a multi-column layout. Before CSS had a built-in way to do this, web developers had to use complicated tricks with floats and tables to fake it. Today, CSS gives us a dedicated set of column properties that make this effortless.

In this lesson you will learn:

What multi-column layout is and why it exists
How to split content into columns with just one CSS property
How to control the gap (space) between columns
How to draw decorative lines (called "rules") between columns
How to control rule style, width, and colour individually and with a shorthand
How to make a heading or element span across ALL columns
How to set column width instead of column count
How to use the columns shorthand property
Real-world use cases for multi-column layout
How to build a full magazine-style article page as a mini-project

✏️ Your Task

Practise what you just learned about Lesson Introduction. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 2 of 13

Prerequisite Concepts

Before we start, let's make sure you understand the building blocks this lesson depends on.

What Is a Block-Level Container?

A block-level element is an element that takes up the full width of its parent and starts on a new line. The most common one is <div>. When we apply column properties, we apply them to a container like <div> and the content inside automatically flows into columns.

html

<div class="article">
  <p>This is a paragraph of text.</p>
  <p>This is another paragraph.</p>
</div>

The <div class="article"> is our multi-column container. Everything inside it · paragraphs, headings, lists · flows through the columns.

What Is the CSS `border` Property?

The column-rule property (which we will learn in detail) works almost identically to border. If you know how to write border: 2px solid red, you already know the pattern for column-rule.

css

/* border shorthand: width style color */
border: 2px solid red;

/* column-rule shorthand: width style color (same pattern!) */
column-rule: 2px solid red;

What Is `px` vs `em`?

Throughout this lesson we use two length units:

px (pixels) · a fixed, absolute size. 40px is always 40 pixels, regardless of font size.
em · a relative size. 1em equals the current font size of the element. If the font is 16px, then 1em = 16px.

The default gap between columns is 1em (roughly equal to the font size).

✏️ Your Task

Practise what you just learned about Prerequisite Concepts. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 3 of 13

Part 1 · What Is CSS Multi-Column Layout?

The Problem It Solves

A normal webpage shows text in one long column that fills the entire width of the page. This works fine for short content, but for long articles on a wide screen, reading becomes tiring · your eyes have to travel the full width of the screen and then jump back to the left to find the next line.

Newspapers discovered centuries ago that narrower columns are easier to read because your eyes don't have to travel as far. The CSS Multi-column Layout Module brings this same principle to the web.

Real-World Uses

News websites · articles split into 2 or 3 columns
Wikipedia · reference lists displayed in multiple columns
Online magazines · editorial feature articles
Product documentation · side-by-side comparison of options
Dictionary / glossary pages · two columns of terms

The Key Properties at a Glance

Property	What It Does
`column-count`	Sets how many columns
`column-gap`	Sets the space between columns
`column-rule-style`	Sets the style of the line between columns
`column-rule-width`	Sets the thickness of the line
`column-rule-color`	Sets the colour of the line
`column-rule`	Shorthand for all three rule properties
`column-span`	Makes an element stretch across all columns
`column-width`	Sets a suggested optimal width per column
`columns`	Shorthand for `column-width` and `column-count`

✏️ Your Task

Practise what you just learned about What Is CSS Multi-Column Layout?. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 4 of 13

Part 2 · `column-count`: Splitting Content into Columns

What It Is

column-count is the most fundamental multi-column property. It tells the browser: "Take the content inside this element and split it into N equal columns."

The browser then automatically:

Calculates how wide each column should be (based on the container width)
Distributes the text evenly across all columns
Balances the columns so they are roughly the same height

Syntax

css

div {
  column-count: 3;
}

3 · the number of columns. You can use any whole number.
auto · the default value, which means "no columns" (just the normal single-column layout).

Simple Isolated Example · 2 Columns

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .two-col {
      column-count: 2;
    }
  </style>
</head>
<body>
  <div class="two-col">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel illum dolore eu feugiat nulla facilisis at
      vero eros et accumsan et iusto odio dignissim qui blandit praesent.
    </p>
  </div>
</body>
</html>

Expected output:

code

┌──────────────────────────────────────────────┐
│  Lorem ipsum dolor sit  │  aliquip ex ea     │
│  amet, consectetuer     │  commodo consequat.│
│  adipiscing elit, sed   │  Duis autem vel    │
│  diam nonummy nibh...   │  eum iriure...     │
└──────────────────────────────────────────────┘

The paragraph flows through two equal-width columns side by side. The browser automatically decided where each column ends and the next begins.

Thinking Prompt: What do you think happens if you have very short text · only one sentence · and you set column-count: 4? Try it! Does the browser still create 4 columns?

Example · 3 Columns (Classic Newspaper Style)

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .three-col {
      column-count: 3;
    }
  </style>
</head>
<body>
  <div class="three-col">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    </p>
  </div>
</body>
</html>

Expected output:

code

┌────────────────────────────────────────────────────────┐
│  Lorem ipsum   │  Ut wisi enim  │  Duis autem vel     │
│  dolor sit     │  ad minim      │  eum iriure dolor   │
│  amet...       │  veniam...     │  in hendrerit...    │
└────────────────────────────────────────────────────────┘

Three equal columns. The content flows: left column fills first, then middle, then right.

Analogy: Think of column-count like pouring water into a tray with dividers. The water fills the first section, spills over to the second, then the third. The text works the same way · it fills the first column, then overflows into the second, and so on.

✏️ Your Task

Practise what you just learned about column-count: Splitting Content into Columns. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 5 of 13

Part 3 · `column-gap`: Space Between Columns

What It Is

column-gap controls the white space between adjacent columns. Without enough gap, columns look cramped and text from neighbouring columns blurs together visually.

Default Value

The default gap is normal, which the browser interprets as 1em (roughly the size of one character). This is a sensible default, but you can increase or decrease it.

Syntax

css

div {
  column-count: 3;
  column-gap: 40px;   /* 40 pixels of space between each column */
}

Micro Demo · Comparing No Gap vs Large Gap

No gap (tight):

css

.tight {
  column-count: 3;
  column-gap: 0;
}

Result: Columns are jammed together · hard to read.

Comfortable gap:

css

.comfortable {
  column-count: 3;
  column-gap: 40px;
}

Result: Clear visual separation between columns.

Full Example with column-count and column-gap:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .article {
      column-count: 3;
      column-gap: 40px;
    }
  </style>
</head>
<body>
  <div class="article">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel illum dolore eu feugiat nulla facilisis at
      vero eros et accumsan et iusto odio dignissim qui blandit praesent.
    </p>
  </div>
</body>
</html>

Expected output:

code

┌───────────────────────────────────────────────────────────┐
│  Lorem ipsum   ←40px→  Ut wisi enim   ←40px→  Duis autem │
│  dolor sit...          ad minim...             vel eum... │
└───────────────────────────────────────────────────────────┘

Thinking Prompt: What would happen if you set column-gap to 0? What about 200px? Is there a point where the gap becomes too large and makes reading harder?

✏️ Your Task

Practise what you just learned about column-gap: Space Between Columns. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 6 of 13

Part 4 · Column Rules: Drawing Lines Between Columns

What Is a Column Rule?

A column rule is a vertical line drawn between adjacent columns · similar to the dividing lines you see between columns in a printed newspaper. It is a purely decorative element that helps readers visually separate one column from another.

Important: The column rule lives inside the column gap and takes up no extra space. If the rule is wider than the gap, the rule extends underneath the adjacent columns rather than pushing them apart.

The column rule is controlled by three individual properties or one shorthand:

code

column-rule-style    ← what kind of line? (solid, dashed, dotted...)
column-rule-width    ← how thick? (in pixels)
column-rule-color    ← what colour?
column-rule          ← shorthand for all three at once

Property 1 · `column-rule-style`

This sets the style (appearance) of the line. It accepts the exact same values as the CSS border-style property.

Possible values:

Value	What it looks like
`none`	No line (default)
`solid`	──────── (a plain continuous line)
`dashed`	- - - - - (broken dashes)
`dotted`	· · · · · (small dots)
`double`	════════ (two parallel lines)
`groove`	A 3D grooved effect (appears sunken)
`ridge`	A 3D ridged effect (appears raised)
`inset`	Top-left sides darker (appears pressed in)
`outset`	Bottom-right sides darker (appears popped out)
`hidden`	Invisible (same as none for columns)

Simple Example:

css

div {
  column-count: 3;
  column-rule-style: solid;
}

Expected output: A thin solid black line appears between each column. The browser sets the default width and colour automatically (usually 1px and the text colour).

Property 2 · `column-rule-width`

This sets the thickness of the line. You can use pixel values or the keyword values thin, medium, and thick.

css

div {
  column-count: 3;
  column-rule-style: dotted;
  column-rule-width: 5px;
}

Expected output: A 5-pixel-wide dotted line between each column.

Value	Approximate thickness
`thin`	1px
`medium`	3px
`thick`	5px
`5px`	Exactly 5 pixels

Note: column-rule-width on its own does nothing if column-rule-style is not set or is none. The style must be set first for the line to appear.

Property 3 · `column-rule-color`

This sets the colour of the line. It accepts any valid CSS colour · colour names, hex codes, RGB, HSL.

css

div {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 3px;
  column-rule-color: lightblue;
}

Expected output: A 3-pixel-wide solid light-blue line between each column.

Default: If you set column-rule-style and column-rule-width but leave out column-rule-color, the line colour automatically matches the text colour of the container.

The Three Properties Together · Full Example:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .ruled {
      column-count: 3;
      column-gap: 40px;
      column-rule-style: solid;
      column-rule-width: 3px;
      column-rule-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="ruled">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    </p>
  </div>
</body>
</html>

Expected output:

code

┌────────────────────────────────────────────────────────┐
│  Lorem ipsum   ┊   Ut wisi enim  ┊   Duis autem vel   │
│  dolor sit...  ┊   ad minim...   ┊   eum iriure...    │
└────────────────────────────────────────────────────────┘
       ↑ light-blue solid 3px rule between each column

Thinking Prompt: What if column-rule-width is set to 60px but column-gap is only 40px? Try it · the rule will extend under the text of adjacent columns because the rule does not push the columns apart.

✏️ Your Task

Practise what you just learned about Column Rules: Drawing Lines Between Columns. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 7 of 13

Part 5 · `column-rule`: The Shorthand

Why Use a Shorthand?

Writing three separate properties every time you want a column rule is verbose. The column-rule shorthand lets you set all three values in a single line · just like border.

Syntax

css

div {
  column-rule: width style color;
}

The order is the same as border: width → style → color.

Examples

css

/* 1px wide, solid style, light-blue colour */
div {
  column-rule: 1px solid lightblue;
}

/* 4px wide, dashed style, red colour */
div {
  column-rule: 4px dashed red;
}

/* 2px wide, dotted style, dark-grey colour */
div {
  column-rule: 2px dotted #333;
}

Full Shorthand Example

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .shorthand-rule {
      column-count: 3;
      column-gap: 30px;
      column-rule: 1px solid lightblue;
    }
  </style>
</head>
<body>
  <div class="shorthand-rule">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
</body>
</html>

Expected output: Three columns with a thin solid light-blue vertical line between them.

Memory Trick: Both border and column-rule follow the same pattern: width style color. Learn it once, use it for both!

Comparing Individual Properties vs Shorthand

css

/* LONG WAY — three separate declarations */
div {
  column-rule-style: dashed;
  column-rule-width: 3px;
  column-rule-color: tomato;
}

/* SHORT WAY — one declaration, same result */
div {
  column-rule: 3px dashed tomato;
}

Both produce identical results. The shorthand is preferred for clean, concise CSS.

✏️ Your Task

Practise what you just learned about column-rule: The Shorthand. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 8 of 13

Part 6 · `column-span`: Making Elements Stretch Across All Columns

What It Is

By default, every element inside a multi-column container · including headings · flows through the columns just like text. So an <h2> would only appear inside one narrow column, not across the full width.

column-span lets you pull an element out of the column flow so it stretches across all columns · perfect for article titles, section headings, or images that should be full-width.

Values

css

h2 {
  column-span: all;   /* span across ALL columns */
}

h2 {
  column-span: none;  /* default — stay inside one column */
}

all · The element expands to fill the full width of the multi-column container.
none · The default. The element stays confined to its current column.

Why This Matters

Imagine a newspaper where the main headline at the top spans the full page width, but the article text below is in three columns. That's exactly what column-span: all lets you recreate on a webpage.

Example · Heading Spans All Columns

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .article {
      column-count: 3;
      column-gap: 30px;
      column-rule: 1px solid #ccc;
    }
    /* The heading spans the full width of all columns */
    .article h2 {
      column-span: all;
      background-color: #f0f0f0;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="article">
    <h2>Breaking News: CSS Layout Gets Even Better</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    </p>
  </div>
</body>
</html>

Expected output:

code

┌──────────────────────────────────────────────────────────┐
│       Breaking News: CSS Layout Gets Even Better         │
│              ← heading spans ALL 3 columns →             │
├──────────────┬───────────────┬──────────────────────────┤
│  Lorem ipsum │  Ut wisi enim │  Duis autem vel eum      │
│  dolor sit   │  ad minim     │  iriure dolor in         │
│  amet...     │  veniam...    │  hendrerit...            │
└──────────────┴───────────────┴──────────────────────────┘

The heading appears above all three columns, full-width. The article text flows beneath it in three columns.

Thinking Prompt: What happens to the column rules when a spanning element is present? The rules are drawn only between columns in the same row · they stop before the spanning element and start again after it.

Example · `column-span: none` (Default Behaviour)

html

<style>
  .article {
    column-count: 3;
    column-rule: 1px solid gray;
  }
  .article h2 {
    column-span: none; /* stays confined to one column — DEFAULT */
  }
</style>

Expected output: The <h2> appears only inside the first column, taking up only its narrow column width. The text continues in the same column after it.

✏️ Your Task

Practise what you just learned about column-span: Making Elements Stretch Across All Columns. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 9 of 13

Part 7 · `column-width`: Setting a Suggested Column Width

What It Is

Instead of telling the browser "I want exactly 3 columns", column-width says: "I want columns that are approximately this wide · create as many as will fit in the container."

This is especially powerful for responsive design · on a wide desktop screen you get many columns, on a narrow mobile screen you might get just one.

Syntax

css

div {
  column-width: 150px;
}

150px · The browser will try to make columns approximately 150px wide.
auto · Default. The browser decides the width based on column-count.

How the Browser Decides the Column Count

If the container is 600px wide and column-width: 150px, the browser calculates: 600 ÷ 150 = 4 columns. It creates as many 150px-ish columns as will fit.

If the container is 900px wide, it creates 6 columns. If it's 300px wide, it creates 2 columns. The layout adapts automatically!

Example · Responsive Column Width

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .flexible {
      column-width: 150px;
      column-gap: 20px;
    }
  </style>
</head>
<body>
  <div class="flexible">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
</body>
</html>

Expected output (on a wide screen):

code

│ ~150px col │ ~150px col │ ~150px col │ ~150px col │

Expected output (on a narrow screen):

code

│ ~150px col │ ~150px col │

The number of columns automatically adjusts to the screen width.

Analogy: column-width is like telling workers: "Set up tables that are about 150cm wide each." On a huge ballroom floor, you'd fit many tables. In a small room, only two or three. The size of each table stays roughly constant · only the count changes.

✏️ Your Task

Practise what you just learned about column-width: Setting a Suggested Column Width. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 10 of 13

Part 8 · `columns`: The Shorthand for Width and Count

What It Is

The columns shorthand combines column-width and column-count into a single declaration.

Syntax

css

div {
  columns: column-width column-count;
}

Or just one value if you only need to set one of them:

css

/* Just set the count */
div {
  columns: 3;
}

/* Just set the width */
div {
  columns: 200px;
}

/* Set both: suggested width of 200px, maximum of 3 columns */
div {
  columns: 200px 3;
}

How the Two Values Work Together

When you write columns: 200px 3:

column-width: 200px · Each column should be approximately 200px wide.
column-count: 3 · Never create more than 3 columns.

This means: "Create columns of about 200px each, but cap it at 3 maximum."

On a wide screen (800px): the browser would create 4 columns at 200px, BUT because of the count limit, it stops at 3. Each column becomes 800px ÷ 3 ≈ 267px.
On a narrow screen (300px): the browser creates only 1 column at ~300px (since 200px fits only 1.5 times).

The layout automatically breaks down to a single column at narrow widths · no media queries needed!

Full `columns` Shorthand Example

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .news-article {
      columns: 200px 3;        /* ~200px wide, max 3 columns */
      column-gap: 40px;
      column-rule: 1px solid lightblue;
    }
  </style>
</head>
<body>
  <div class="news-article">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    </p>
  </div>
</body>
</html>

Expected output (wide screen): 3 columns of ~200px each, with a light-blue rule between them.

Expected output (mobile phone): 1 or 2 columns, no media queries needed.

✏️ Your Task

Practise what you just learned about columns: The Shorthand for Width and Count. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 11 of 13

Part 9 · All Column Properties Reference Table

Here is a complete summary of every multi-column property covered in this lesson:

Property	Values	What It Does
`column-count`	number, `auto`	Sets the exact number of columns
`column-gap`	length (px, em), `normal`	Sets the space between columns
`column-rule-style`	`none`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`, `hidden`	Sets the line style between columns
`column-rule-width`	length (px), `thin`, `medium`, `thick`	Sets the line thickness
`column-rule-color`	any CSS colour	Sets the line colour
`column-rule`	`width style color`	Shorthand for all three rule properties
`column-span`	`none`, `all`	Makes an element span across all columns
`column-width`	length (px, em), `auto`	Sets the suggested optimal column width
`columns`	`column-width column-count`	Shorthand for width and count together

✏️ Your Task

Practise what you just learned about All Column Properties Reference Table. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 12 of 13

Guided Practice Exercises

🎯 Your Challenge

Exercise 1 · Simple 3-Column Article

Objective: Create a 3-column text layout using column-count.

Scenario: You are building a news website. A long article needs to be split into 3 columns for readability.

Steps:

Create exercise1.html.
Add a <div class="news"> containing at least 3 paragraphs of text.
Apply column-count: 3 to .news.
Add column-gap: 30px for comfortable spacing.

Expected output:

✏️ Task

Expected result: `css .article { columns: 150px 4; column-gap: 20px; column-rule: 1px solid gray; } ` ·

code

┌──────────────────────────────────────────────────┐
│  Paragraph   │  text cont-  │  text cont-        │
│  text...     │  inues...    │  inues here...     │
└──────────────────────────────────────────────────┘

Self-check questions:

Does the text flow across all 3 columns?
Is there visible spacing between columns?
Do all 3 columns appear to be roughly equal in height?

Exercise 2 · Column Rules Practice

Objective: Add decorative rules between columns using individual rule properties.

Scenario: A magazine wants a visible dividing line between its columns.

Steps:

Start with your Exercise 1 layout.
Add column-rule-style: dashed.
Add column-rule-width: 2px.
Add column-rule-color: tomato.
Then refactor those 3 lines into a single column-rule shorthand.

Hint: The shorthand order is: width style color.

Expected output: Dashed red lines separating the three columns.

What-if challenge: Change the rule style to double with a width of 6px and a colour of steelblue. What does a double rule look like?

Exercise 3 · Spanning Heading

Objective: Add a full-width heading that spans all three columns.

Scenario: The news article needs a headline above the columns.

Steps:

Start with your Exercise 2 layout.
Add an <h2> inside the <div> as the very first element (before the paragraphs).
Apply column-span: all to the h2.
Style it with a background colour and centred text to make it stand out.

Expected output:

code

┌──────────────────────────────────────────────────────┐
│        Full-Width Headline Across All Columns        │
├────────────────┬─────────────────┬───────────────────┤
│  Article text  │  continues in   │  three columns    │
│  here...       │  the middle...  │  here...          │
└────────────────┴─────────────────┴───────────────────┘

Self-check questions:

Does the heading stretch the full width of the container?
Does the text continue in 3 columns beneath the heading?
Do the column rules stop at the heading and restart after it?

Exercise 4 · Flexible Columns with `column-width`

Objective: Use column-width for a responsive multi-column layout.

Scenario: A blog needs to look good on both desktop and mobile without writing media queries.

Steps:

Create a new <div class="blog-post"> with 2 · 3 paragraphs of text.
Apply column-width: 200px.
Add column-gap: 25px and column-rule: 1px solid #ddd.
Resize your browser window and watch the column count change automatically.

Self-check questions:

On a wide window, how many columns do you see?
On a very narrow window, how many columns appear?
Did you write any media queries? (You shouldn't need to!)

Exercise 5 · Full Columns Shorthand

Objective: Rewrite a multi-column layout using the columns shorthand.

Starting code (long way):

css

.article {
  column-width: 150px;
  column-count: 4;
  column-gap: 20px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: gray;
}

Your task: Refactor this into the shortest possible CSS using the columns shorthand and column-rule shorthand. The output must look identical.

Expected result:

css

.article {
  columns: 150px 4;
  column-gap: 20px;
  column-rule: 1px solid gray;
}

Phase 13 of 13

Common Beginner Mistakes

Mistake 1 · Applying Column Properties to the Wrong Element

Column properties go on the container (<div>, <article>, <section>) · NOT on individual paragraphs or headings.

css

/* WRONG — applied to each paragraph */
p {
  column-count: 3;
}

/* CORRECT — applied to the container holding the paragraphs */
.article {
  column-count: 3;
}

Mistake 2 · `column-rule-width` Without `column-rule-style`

Setting only column-rule-width produces no visible line. The rule only appears when column-rule-style is set to something other than none.

css

/* WRONG — rule is invisible */
.article {
  column-count: 3;
  column-rule-width: 4px;
  column-rule-color: red;
}

/* CORRECT — rule is now visible */
.article {
  column-count: 3;
  column-rule-style: solid;  /* This must be set! */
  column-rule-width: 4px;
  column-rule-color: red;
}

Mistake 3 · Confusing `column-gap` and `column-rule`

Beginners sometimes think column-rule adds extra width. It does NOT. The rule lives inside the gap. If your rule is wider than the gap, it overlaps under the text · it doesn't push the columns apart.

css

/* Potential issue: rule is 60px but gap is only 20px */
.article {
  column-count: 3;
  column-gap: 20px;
  column-rule: 60px solid red;   /* rule wider than gap — overlaps text */
}

/* CORRECT: rule width should be smaller than gap */
.article {
  column-count: 3;
  column-gap: 40px;
  column-rule: 2px solid red;    /* rule much thinner than gap */
}

Mistake 4 · Putting `column-span` on the Container

column-span should be applied to an element inside the multi-column container · such as a heading <h2> or a <blockquote> · not to the container itself.

css

/* WRONG — column-span on the container itself */
.article {
  column-count: 3;
  column-span: all;   /* meaningless here */
}

/* CORRECT — column-span on a child element inside the container */
.article h2 {
  column-span: all;   /* makes the h2 span all columns */
}

Mistake 5 · Expecting `column-width` to Set an Exact Width

column-width is a suggestion, not a strict rule. The browser uses it as a guide to calculate how many columns to create, but the actual column width may differ.

css

/* This means "try for ~150px columns" — not "make every column exactly 150px" */
.article {
  column-width: 150px;
}

If you need exact column widths, use CSS Grid instead.

Mistake 6 · Short Text with Many Columns

If there isn't enough text to fill all the specified columns, you get empty columns at the end. This looks awkward.

css

/* PROBLEM: only 1 sentence of text split into 5 columns looks strange */
.article {
  column-count: 5;
}

Tip: Only use as many columns as your content comfortably fills. 2 · 3 columns work well for most text content.

✏️ Your Task

Practise what you just learned about Common Beginner Mistakes. Open your editor, type the examples above by hand, modify them, and observe what changes.

🏗️ Build It — Mini Project

Project Goal

Build a fully styled magazine-style article page that demonstrates every multi-column property from this lesson.

The page will have:

A full-width page header
A multi-column article section with a spanning headline
A visible column rule
A mid-article pull-quote that spans all columns
Comfortable gaps and styling

Stage 1: Setup · HTML Structure

Create magazine_article.html:

starter.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Daily Reader</title>
  <style>
    /* CSS goes here */
  </style>
</head>
<body>

  <!-- Page Header -->
  <header>
    <h1>The Daily Reader</h1>
    <p>Technology · Science · Culture</p>
  </header>

  <!-- Multi-column Article -->
  <div class="article">

    <!-- Spanning headline -->
    <h2>The Future of Web Layout: CSS Multi-Column Explained</h2>

    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>

    <p>
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel illum dolore eu feugiat nulla facilisis at
      vero eros et accumsan et iusto odio dignissim qui blandit praesent
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>

    <!-- Pull-quote spanning all columns -->
    <blockquote class="pull-quote">
      "CSS Multi-Column Layout brings the elegance of print directly to the web."
    </blockquote>

    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>

    <p>
      Nam liber tempor cum soluta nobis eligend optio congue nihil quod doming
      id quod mazim placerat facer possim assum. Typi non habent claritatem
      insitam, est usus legentis in iis qui facit eorum claritatem.
    </p>

  </div>

  <!-- Footer -->
  <footer>
    <p>© 2026 The Daily Reader. All rights reserved.</p>
  </footer>

</body>
</html>

Lesson 63 complete! 🎉

You covered:

✅ Lesson Introduction
✅ Prerequisite Concepts
✅ Part 1 · What Is CSS Multi-Column Layout?
✅ Part 2 · `column-count`: Splitting Content into Columns
✅ Part 3 · `column-gap`: Space Between Columns
✅ Part 4 · Column Rules: Drawing Lines Between Columns
✅ Part 5 · `column-rule`: The Shorthand
✅ Part 6 · `column-span`: Making Elements Stretch Across All Columns

← Lesson 62 Lesson 64 →

CSS Multiple Columns · Building Newspaper-Style Layouts from Scratch

👋 Welcome to Lesson 63

What Is a Block-Level Container?

What Is the CSS border Property?

What Is px vs em?

The Problem It Solves

Real-World Uses

The Key Properties at a Glance

What It Is

Syntax

Simple Isolated Example · 2 Columns

Example · 3 Columns (Classic Newspaper Style)

What It Is

Default Value

Syntax

Micro Demo · Comparing No Gap vs Large Gap

Full Example with column-count and column-gap:

What Is a Column Rule?

Property 1 · column-rule-style

Property 2 · column-rule-width

Property 3 · column-rule-color

The Three Properties Together · Full Example:

Why Use a Shorthand?

Syntax

Examples

Full Shorthand Example

Comparing Individual Properties vs Shorthand

What It Is

Values

Why This Matters

Example · Heading Spans All Columns

Example · column-span: none (Default Behaviour)

What It Is

Syntax

How the Browser Decides the Column Count

Example · Responsive Column Width

What It Is

Syntax

How the Two Values Work Together

Full columns Shorthand Example

Exercise 1 · Simple 3-Column Article

Exercise 2 · Column Rules Practice

Exercise 3 · Spanning Heading

Exercise 4 · Flexible Columns with column-width

Exercise 5 · Full Columns Shorthand

Mistake 1 · Applying Column Properties to the Wrong Element

Mistake 2 · column-rule-width Without column-rule-style

Mistake 3 · Confusing column-gap and column-rule

Mistake 4 · Putting column-span on the Container

Mistake 5 · Expecting column-width to Set an Exact Width

Mistake 6 · Short Text with Many Columns

Project Goal

Stage 1: Setup · HTML Structure

The Future of Web Layout: CSS Multi-Column Explained

Lesson 63 complete! 🎉

What Is the CSS `border` Property?

What Is `px` vs `em`?

Property 1 · `column-rule-style`

Property 2 · `column-rule-width`

Property 3 · `column-rule-color`

Example · `column-span: none` (Default Behaviour)

Full `columns` Shorthand Example

Exercise 4 · Flexible Columns with `column-width`

Mistake 2 · `column-rule-width` Without `column-rule-style`

Mistake 3 · Confusing `column-gap` and `column-rule`

Mistake 4 · Putting `column-span` on the Container

Mistake 5 · Expecting `column-width` to Set an Exact Width