Text Columns

Text Columns

CSS provides a built-in multi-column layout module that lets you flow text into newspaper-style columns — no floats or positioning needed.

The column-count Property

Set the number of columns with column-count:

.article {
    column-count: 3;
}

The browser will automatically divide the content into 3 equal-width columns.

The column-width Property

Instead of specifying the number of columns, you can set a minimum column width and let the browser decide how many columns fit:

.article {
    column-width: 250px;
}
/* Browser creates as many 250px+ columns as the container can fit */

The columns Shorthand

Combine count and width in one property:

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

Column Gap

Control the space between columns:

.article {
    column-count: 3;
    column-gap: 40px;  /* Default is usually ~1em */
}

Column Rule

Add a vertical line between columns — works like border:

.article {
    column-count: 3;
    column-gap: 40px;
    column-rule: 1px solid #ddd;
}

Column Span

Make an element span across all columns (like a heading):

.article h2 {
    column-span: all;
    text-align: center;
}

Complete Example

<article class="multi-col">
    <h2>Breaking News</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna 
    aliqua. Ut enim ad minim veniam...</p>
    <p>More paragraphs of text flow naturally across 
    the columns...</p>
</article>

.multi-col {
    column-count: 3;
    column-gap: 32px;
    column-rule: 1px solid #e0e0e0;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

All Column Properties

Property	Purpose
column-count	Number of columns
column-width	Minimum column width
columns	Shorthand for count + width
column-gap	Space between columns
column-rule	Vertical line between columns
column-span	Element spans all columns
break-inside	Prevent content from breaking across columns

Key Takeaways

• Use column-count or column-width for newspaper-style text layouts
• column-gap and column-rule control spacing and dividers
• column-span: all lets headings span all columns
• Text columns are purely CSS — no extra HTML markup needed