CSS Multi-column Layouts
Multi-column layouts allow text or content to flow into multiple columns, similar to newspapers or magazines. Unlike Flexbox or Grid, multi-column layouts are primarily used for text-heavy content where the goal is readability and smooth content flow.
column-count
The column-count property specifies how many columns the content should be divided into.
Example:
<div class="multi-column-count">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
</p>
</div>
.multi-column-count {
column-count: 3; /* Divide content into 3 columns */
column-gap: 20px; /* Space between columns */
padding: 15px;
background: #f9f9f9;
font-family: Arial, sans-serif;
}
column-width
The column-width property defines the ideal width of each column. The browser creates as many columns as fit in the container while respecting the width.
Example:
<div class="multi-column-width">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
Praesent libero. Sed cursus ante dapibus diam.
</p>
</div>
.multi-column-width {
column-width: 200px; /* Ideal width of each column */
column-gap: 15px;
padding: 15px;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
column-gap & column-rule
column-gap→ sets the space between columns.column-rule→ adds a line (border) between columns for visual separation.
Example:
<div class="multi-column-gap-rule">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
Praesent libero. Sed cursus ante dapibus diam.
</p>
</div>
.multi-column-gap-rule {
column-count: 2; /* Number of columns */
column-gap: 30px; /* Space between columns */
column-rule: 2px solid #333; /* Vertical line between columns */
padding: 15px;
background: #fffbe6;
font-family: Arial, sans-serif;
}
Pros & Cons of Multi-column Layouts vs Flex/Grid
| Feature | Multi-column | Flex/Grid |
|---|---|---|
| Best For | Text-heavy content, articles, blogs | Complex layouts, apps, dashboards |
| Ease of Use | Simple for flowing content | More control over rows, columns, and alignment |
| Responsiveness | Adjusts automatically with column-width | Requires explicit media queries for full control |
| Alignment & Control | Limited | Precise placement, spacing, and alignment |
| Styling | Limited to basic column spacing and rules | Advanced styling and complex layouts possible |