Multiple Columns in CSS
? Multiple Columns in CSS
CSS Multi-column Layout allows you to easily split content into multiple columns, similar to a newspaper or magazine layout.
Core Properties
| Property | Description |
|---|---|
column-count | Number of columns you want |
column-width | Ideal width of each column |
column-gap | Space between columns |
column-rule | Adds a line (border) between columns |
column-rule-width | Thickness of the column rule |
column-rule-style | Style of the rule (solid, dashed, etc.) |
column-rule-color | Color of the rule |
columns | Shorthand for column-width and column-count |
Basic Example
.article { column-count: 3; column-gap: 20px;}Splits .article content into 3 columns with 20px space between.
Using column-width
.article { column-width: 200px; column-gap: 15px;}The browser will create as many columns of ~200px width as will fit.
Adding a Column Rule (separator line)
.article { column-count: 2; column-gap: 30px; column-rule: 2px solid #ccc;}Shorthand: columns
.article { columns: 3 150px; /* 3 columns with ~150px width each */}Notes
Content flows from the top of the first column down and then continues at the top of the next.
Works well for text-heavy layouts.
Not supported in older browsers, but widely supported in modern browsers.
Example with HTML
<div class="article"> <p>Paragraph 1...</p> <p>Paragraph 2...</p> <p>Paragraph 3...</p> <!-- More paragraphs --></div>With the CSS above, paragraphs flow evenly across columns.
Want me to help you create a multi-column layout with responsive adjustments?
