← Back to CSS Course | Chapter 8: Animations & Effects | Lesson 17 of 22

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:

  1. column-count
  2. column-width
  3. column-gap
  4. column-rule
  5. Preventing Awkward Breaks
Syntax
css 
selector {
  column-count: number;
  column-gap: length;
  column-rule: width style color;
}

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.
  • Accepted values:
  • column-count — number of columns, or auto
  • column-width — ideal width such as 200px
  • column-gap — length, or normal
  • column-rule — line between columns, like 1px solid #ccc
  • column-span — none | all
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.
  • Accepted values:
  • column-width: auto — default, no minimum width
  • column-width: <length> — the ideal minimum column width
  • columns: 200px 3 — shorthand for width and count
  • column-count — the two combine, count acts as a maximum
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • column-gap: normal — default, 1em in multi-column
  • column-gap: <length> — fixed gap
  • column-gap: <percentage> — relative to the container
  • gap — sets row-gap and column-gap; also applies to multi-column
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • column-rule: <width> <style> <color> — shorthand
  • column-rule-width: thin | medium | thick | <length> — line thickness
  • column-rule-style: solid | dashed | dotted | none — line style
  • column-rule-color: <color> — line color
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • break-inside: avoid — keep an item within one column
  • break-before: column — force a new column before
  • break-after: column — force a new column after
  • column-span: all — spans across all columns
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>
Live Example
Related Topics

CSS Buttons · CSS Clip Path · CSS Image Shapes · CSS Shapes

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using columns for layout regions that need independent, unrelated content (like a sidebar), rather than for flowing a single block of text.
  2. Forgetting that column-count is a target, not a guarantee, since narrow viewports may render fewer columns than requested.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.