CSS Columns

Newspapers have used multi-column text layouts for well over a century, letting readers scan shorter, more comfortable line lengths instead of one long, wide paragraph. CSS Multi-column Layout brings that exact same newspaper-style flow to the web with just a couple of properties. Instead of manually splitting content into separate boxes, you apply column-count or column-width to a single container, and the browser automatically flows the content across as many columns as fit, wrapping naturally from one column to the next. This is a great fit for long-form text on cookiescursor.com, like a glossary or an FAQ page, where readers benefit from shorter line lengths without needing a custom grid layout.

In this page:

column-count
column-width
column-gap
column-rule
Preventing Awkward Breaks

column-count

column-count splits a container's content into a specific number of columns, letting the browser handle wrapping the flow automatically from one column into the next. This is the CSS multi-column layout module, distinct from flexbox or grid, and is best suited for long flowing text like articles.

Note: Three columns is a comfortable default for body text on a typical desktop-width container, adjust from there based on your content.

Warning: On a narrow screen, a high column-count can squeeze columns down to an uncomfortably narrow, hard-to-read width.

Example: column-count

css

<style>
.text {
  column-count: 3;
  background: #f5f5f5;
  padding: 12px;
}
</style>
<div class="text">Long flowing text automatically wraps from one column into the next.</div>

column-width

column-width sets a target width per column instead of a fixed count, letting the browser fit as many columns of roughly that width as the container allows. Because the column count adapts to the container's size, this property is naturally responsive without any media queries.

Note: column-width is naturally responsive, since the number of columns adjusts automatically as the container gets wider or narrower.

Warning: column-width is a minimum target, not an exact value, so actual rendered column widths can vary slightly to fill the available space evenly.

Example: column-width

css

<style>
.text {
  column-width: 200px;
  background: #f5f5f5;
  padding: 12px;
}
</style>
<div class="text">Fits as many 200px columns as the container allows, no media queries needed.</div>

column-gap

column-gap sets the space between adjacent columns, controlling how much breathing room separates one column of text from the next. Without enough gap, text in adjacent columns can visually run together and become harder to read.

Note: A column-gap between 24px and 40px is a comfortable range that keeps columns feeling distinct without wasting too much horizontal space.

Warning: A very small column-gap can make columns feel like a single confusing block, especially without a visible rule line to separate them.

Example: column-gap

css

<style>
.text {
  column-count: 2;
  column-gap: 40px;
  background: #f5f5f5;
  padding: 12px;
}
</style>
<div class="text">Generous space between the two columns</div>

column-rule

column-rule draws a dividing line between columns, using the same style, width, and color syntax as the border shorthand, purely as a visual separator. This rule sits inside the gap between columns and never affects the column width itself, only the visual divider.

Note: A thin, light-colored column-rule is usually enough, it just needs to be visible, not bold.

Warning: column-rule only draws a line, it does not add any spacing on its own, pair it with column-gap for a well-balanced look.

Example: column-rule

css

<style>
.text {
  column-count: 2;
  column-rule: 1px solid #ccc;
  background: #f5f5f5;
  padding: 12px;
}
</style>
<div class="text">A thin dividing line between columns</div>

Preventing Awkward Breaks

break-inside: avoid keeps a specific element, like a heading or a card, from being awkwardly split across two columns. column-span: all lets an element, like a title, stretch across every column instead of sitting inside just one.

Note: Apply break-inside: avoid to any self-contained block, like an image caption or a small card, that would look broken if split mid-way.

Warning: column-span: all removes an element from the normal column flow entirely, so use it deliberately for section titles, not for regular flowing content.

Example: Preventing Awkward Breaks

css

<style>
.text {
  column-count: 2;
  background: #f5f5f5;
  padding: 12px;
}
h2 {
  column-span: all;
}
.card {
  break-inside: avoid;
  background: white;
  border: 1px solid #ccc;
  padding: 8px;
  margin-bottom: 8px;
}
</style>
<div class="text">
  <h2>Spans all columns</h2>
  <div class="card">Never split mid-way</div>
</div>

Common Mistakes

Using columns for layout regions that need independent, unrelated content (like a sidebar), rather than for flowing a single block of text.
Forgetting that column-count is a target, not a guarantee, since narrow viewports may render fewer columns than requested.
Letting headings or images split awkwardly across a column break without setting break-inside: avoid.

Chapter Summary

column-count and column-width both create a multi-column flow, automatically wrapping content from column to column.
column-gap and column-rule control the spacing and dividing line between columns.
break-inside: avoid and column-span: all prevent awkward mid-element column breaks and let an element span every column.

Browser Support

CSS Multi-column Layout properties are supported by all modern browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Buttons Next Lesson → CSS Clip Path