CSS Multiple Columns
Creating newspaper-style column layouts
📰 What are CSS Multiple Columns?
CSS Multiple Columns (Multi-column Layout) allows you to create newspaper-style column layouts where content flows from one column to the next automatically.
/* Basic multi-column layout */
.multi-column {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #ddd;
}
/* Alternative approach */
.multi-column-width {
column-width: 200px;
column-gap: 30px;
}
Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Column Properties
Column Count
Set exact number of columns
.text {
column-count: 3;
}Column Width
Set optimal column width
.text {
column-width: 250px;
}Column Gap
Space between columns
.text {
column-gap: 40px;
}Column Rule
Add divider between columns
.text {
column-rule: 2px solid #333;
}🔹 Advanced Column Control
Advanced CSS column properties provide precise control over multi-column text layout for enhanced readability. Using column-count, column-width, and column-gap properties, developers create newspaper-style layouts that adapt to available space. The column-span property allows elements to break across multiple columns, particularly useful for headings and full-width images within columnar content. Additional controls include column-rule for visual separators, column-fill for balancing content distribution, and break properties to prevent awkward splits. These techniques improve reading flow for long-form content, optimize space utilization, and create visually appealing layouts for articles and documentation.
/* Advanced column styling */
.magazine-layout {
column-count: 3;
column-gap: 30px;
column-rule: 2px solid #e1e5e9;
column-fill: balance;
text-align: justify;
line-height: 1.6;
}
/* Prevent breaking inside elements */
.magazine-layout h2 {
break-inside: avoid;
column-span: all; /* Span across all columns */
margin: 20px 0;
padding: 10px 0;
border-bottom: 2px solid #3b82f6;
}
/* Control column breaks */
.magazine-layout .break-before {
break-before: column;
}
.magazine-layout .break-after {
break-after: column;
}
/* Responsive columns */
@media (max-width: 768px) {
.magazine-layout {
column-count: 1;
}
}
Output:
Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
🔹 Column Break Properties
CSS column break properties prevent awkward content splits and maintain reading coherence in multi-column layouts. Using break-inside: avoid prevents elements from splitting between columns, while break-before and break-after control where columns start and end. These properties are particularly important for maintaining visual hierarchy and content integrity, ensuring that headings stay with their associated paragraphs, lists remain unbroken, and images don't get separated from their captions. Modern implementations also consider fragmentation contexts and work alongside other layout methods like Flexbox and Grid. Proper break control enhances readability, maintains content relationships, and creates professional-quality multi-column presentations.
/* Column break control */
.article {
column-count: 2;
column-gap: 25px;
}
/* Avoid breaking inside headings */
.article h3 {
break-inside: avoid;
}
/* Force break before element */
.new-section {
break-before: column;
}
/* Force break after element */
.end-section {
break-after: column;
}
/* Span element across all columns */
.full-width {
column-span: all;
background: #f8f9fa;
padding: 15px;
margin: 20px 0;
}