Text Columns

Text Columns

CSS has a dedicated Multi-Column Layout module for splitting text into newspaper-style columns — no floats required. This is perfect for long-form text content.

column-count

.article {
    column-count: 3;  /* Split text into 3 equal columns */
}

/* The browser automatically distributes the text evenly 
   across all three columns */

column-width

.article {
    column-width: 250px;
    /* The browser creates as many columns as will fit 
       at 250px minimum width */
}

The browser adjusts the number of columns responsively based on the container width.

columns — Shorthand

/* columns: width count */
.article {
    columns: 250px 3;
    /* Up to 3 columns, each at least 250px wide */
}

column-gap — Spacing Between Columns

.article {
    column-count: 3;
    column-gap: 40px;  /* 40px gap between columns */
}

column-rule — Divider Line

.article {
    column-count: 3;
    column-gap: 40px;
    column-rule: 1px solid #ddd;  /* Vertical line between columns */
}

/* column-rule works like border shorthand: width | style | color */
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #ddd;

Visual Result

┌──────────────┐│┌──────────────┐│┌──────────────┐
│ Lorem ipsum  │││ adipiscing   │││ Ut enim ad   │
│ dolor sit    │││ elit, sed do │││ minim veniam, │
│ amet,        │││ eiusmod      │││ quis nostrud  │
│ consectetur  │││ tempor       │││ exercitation  │
└──────────────┘│└──────────────┘│└──────────────┘
                │ column-rule   │

column-span — Spanning All Columns

.article {
    column-count: 3;
}

.article h2 {
    column-span: all;  /* This heading stretches across all columns */
    text-align: center;
    margin: 20px 0;
}

Useful for inserting full-width headings, quotes, or images within a multi-column text.

break-inside — Preventing Column Breaks

.article .quote-box {
    break-inside: avoid;  /* Don't split this element across columns */
    padding: 16px;
    background: #f0f4f8;
    border-radius: 8px;
    margin-bottom: 16px;
}

Without break-inside: avoid, a box might get split across two columns, which looks broken.

All Column Properties

Property	What It Does
column-count	Number of columns
column-width	Ideal minimum width per column
columns	Shorthand for width and count
column-gap	Space between columns
column-rule	Vertical divider line between columns
column-span	none or all — span across columns
break-inside	avoid — prevent column breaks inside an element

column-count vs Flexbox Columns

Feature	CSS Columns	Flexbox
Best for	Flowing text content	Structural layout
Content flow	Top-to-bottom, then next column	Left-to-right in a row
Equal height	Automatic balancing	Stretch by default
Mixed content	Text-focused	Any elements

Key Takeaways

• column-count creates newspaper-style text columns automatically
• column-width makes columns responsive without media queries
• column-gap and column-rule control spacing and dividers
• column-span: all lets elements span across all columns
• break-inside: avoid prevents boxes from splitting across columns
• CSS columns are for flowing text — use Flexbox/Grid for structural layouts