CSS Multiple-Columns

In CSS, the Multi-column Layout Module allows you to arrange content into multiple columns, similar to how text flows in a traditional newspaper. Unlike Flexbox or Grid, which are designed for general layout structure, the Multi-column layout is specifically built to handle flowing content. As text reaches the bottom of one column, it automatically moves to the top of the next.

Basic Syntax

To create multiple columns, you apply column properties to a parent container. The browser then handles the distribution of all child elements into those columns automatically.

.container {
    column-count: 3; /* Divide content into 3 columns */
    column-gap: 30px; /* Space between the columns */
    column-rule: 2px solid #eaeaea; /* A vertical line between columns */
}

Here is a breakdown of these core properties:

• column-count: Explicitly sets the number of columns the element should be divided into.
• column-gap: Sets the distance between the columns. If not specified, the browser uses a default (usually 1em).
• column-rule: This is a shorthand property (like border) that draws a vertical line between columns. It does not take up any space; it is drawn in the middle of the gap.

Column Width and Flexibility

While column-count is great for a fixed number of columns, it isn't always responsive. You can use column-width to give the browser a "hint" about how wide columns should ideally be.

• Fixed Width Columns (Suggestive):

.container {
    column-width: 250px; /* Browser creates as many 250px columns as will fit */
}

• Flexible Width Columns:

If you set column-width: auto; (the default), the browser relies entirely on column-count to determine the width.

Spanning Columns

Sometimes you want an element like a major headline or a large advertisement to stretch across all columns instead of being confined to just one. This is where column-span comes in.

.main-heading {
    column-span: all; /* Breaks the column flow to span across the container */
    margin: 20px 0;
}

Break Inside Columns

One of the biggest frustrations with multi-column layouts is when an element (like an image or a card) gets split in half between the bottom of one column and the top of the next. To prevent this, use break-inside.

.item {
    break-inside: avoid; /* Keeps the element whole within a single column */
    display: inline-block; /* Often used as a fallback for older browsers */
    width: 100%; 
}

Example

In this real-world example, we create a three-column article layout with a header that spans across the top and items that stay intact as they flow.

.article-wrapper {
    column-count: 3;
    column-gap: 40px;
    column-rule: 1px dotted #999;
    padding: 20px;
}

.article-header {
    column-span: all;
    text-align: center;
    background: #f4f4f4;
    padding: 20px;
}

.content-block {
    margin-bottom: 15px;
    break-inside: avoid;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
}

HTML

<div class="article-wrapper">
    <header class="article-header">
        <h1>Daily News Gazette</h1>
    </header>
    <div class="content-block">
        <h3>Local News</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block">
        <h3>Weather Update</h3>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="content-block">
        <h3>Sports Highlights</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>
    <div class="content-block">
        <h3>Technology</h3>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
    </div>
</div>

Responsive Design

While column-width provides basic responsiveness, you might want more control. For instance, you may want 3 columns on a desktop, 2 on a tablet, and 1 on a mobile device. Media queries are the standard approach here:

/* Default for mobile */
.container {
    column-count: 1;
}

/* Tablet */
@media (min-width: 600px) {
    .container {
        column-count: 2;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        column-count: 3;
    }
}

Browser Compatibility

Modern browser support for CSS columns is excellent. All major browsers (Chrome, Firefox, Safari, Edge) support the core properties. However, very old versions of Internet Explorer (IE9 and earlier) do not support Multi-column layouts at all. In those cases, the layout will simply fall back to a single column, which is still readable and functional a perfect example of progressive enhancement.

By mastering column-count, column-width, and break-inside, you can create sophisticated, readable text layouts that adapt beautifully to any screen size.