? CSS Multiple Columns

⚡ Quick Overview

CSS Multiple Columns let you split long text into vertical columns, similar to a newspaper or magazine layout. This makes dense content easier to scan and read.

With just a few properties, you can control how many columns appear, how wide they are, the space between them, and whether there is a rule (line) separating each column.

? Key Concepts

• column-count – sets how many columns the content is split into.
• column-gap – controls the spacing between each column.
• column-rule – draws a vertical border line between columns.
• column-width – suggests an ideal width; the browser decides how many columns can fit.
• Multi-column layout is great for articles, blog posts, descriptions, and any long text content.

? Syntax / Theory

You can apply multi-column layout to any block-level element (like a <div> or <section>). The browser then automatically flows the text across the columns from top to bottom, left to right.

/* Basic multi-column syntax for a text container */
.article-text {
column-count: 3;        /* Number of columns */
column-gap: 20px;       /* Space between columns */
column-rule: 1px solid #ccc;  /* Line between columns */
}
/* Alternative: let the browser decide how many columns fit */
.article-text-fluid {
column-width: 200px;    /* Ideal width for each column */
column-gap: 20px;
}

? Live Output: Multiple Columns in Action

In this preview, the paragraph is split into three vertical columns with a 20px gap and a thin gray line between them.

column-count decides how many columns the text is divided into, while column-gap and column-rule fine-tune the spacing and visual separation.

? Complete Example (HTML + CSS)

Here is a full example showing how you might structure article content with multiple columns and make it more readable on smaller screens.

<!-- Article content that uses multiple columns -->
<div class="article-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec est at libero sodales tincidunt.
Mauris eget felis nec velit imperdiet aliquam. Sed ut diam urna. Praesent euismod euismod odio, at
dignissim magna lobortis a. Morbi convallis, augue et fermentum feugiat, sapien justo sodales ligula.
</div>

/* Multi-column CSS with responsive behavior */
.article-text {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #ccc;
}
@media (max-width: 768px) {
.article-text {
column-count: 1;    /* Fall back to single column on small screens */
}
}