What You'll Learn
Create newspaper/magazine layouts with column-count
Make responsive columns with column-width
Control spacing with column-gap
Add visual separators with column-rule
Span elements across columns with column-span
Control column breaks with break-inside, break-before, break-after
Introduction to Multi-Column Layout
The CSS Multi-Column Layout module allows you to flow content into multiple columns, like newspapers or magazines. Content automatically flows from one column to the next, creating balanced, readable layouts perfect for articles, blog posts, and text-heavy content.
Multi-column layout is ideal for long-form text content where you want to improve readability by creating narrower line lengths without requiring complex grid or flexbox configurations.
When to Use: Multi-column layout works best for flowing text content. For component-based layouts with distinct sections, use Grid or Flexbox instead.
column-count - Fixed Number of Columns
The column-count property specifies exactly how many columns to create, regardless of container width.
/* Create columns */
column-count: 2; /* Two columns */
column-count: 3; /* Three columns */
column-count: 4; /* Four columns */
/* Practical examples */
/* Two-column article */
.article {
column-count: 2;
column-gap: 2rem;
}
/* Three-column footer */
.footer-links {
column-count: 3;
column-gap: 1.5rem;
}
/* Responsive columns */
.content {
column-count: 1;
}
@media (min-width: 768px) {
.content {
column-count: 2;
}
}
@media (min-width: 1024px) {
.content {
column-count: 3;
}
}
Fixed Columns: column-count creates a fixed number of columns. On narrow screens, this can create very narrow columns. Consider using column-width for better responsiveness.
column-width - Responsive Column Sizing
The column-width property sets a minimum width for columns. The browser creates as many columns as fit, making the layout automatically responsive.
/* Minimum column width */
column-width: 200px;
/* Browser creates as many 200px+ columns as fit */
column-width: 250px;
/* Wider minimum columns */
column-width: 15em;
/* Width based on font size */
/* Practical examples */
/* Responsive article */
.article {
column-width: 250px;
column-gap: 2rem;
}
/* Automatically adjusts column count based on container width */
/* Footer links */
.footer {
column-width: 200px;
column-gap: 1.5rem;
}
/* Gallery captions */
.captions {
column-width: 180px;
column-gap: 1rem;
}
/* Combined with max-width */
.content {
max-width: 1200px;
margin: 0 auto;
column-width: 300px;
column-gap: 2rem;
}
/* Creates 1-4 columns depending on viewport */
Better Responsiveness: column-width is usually better than column-count because it automatically adapts to container width without media queries.
column-gap - Spacing Between Columns
Control the space between columns using column-gap.
/* Gap sizes */
column-gap: normal; /* Browser default, usually 1em */
column-gap: 1rem;
column-gap: 2rem;
column-gap: 40px;
/* Practical examples */
/* Tight spacing */
.compact {
column-count: 3;
column-gap: 1rem;
}
/* Spacious layout */
.airy {
column-count: 2;
column-gap: 3rem;
}
/* Proportional to font size */
.article {
column-width: 250px;
column-gap: 2em;
}
/* Gap scales with font-size */
/* No gap */
.tight {
column-count: 2;
column-gap: 0;
}
column-rule - Visual Column Separator
Add a visual line between columns with column-rule, which works like border.
/* Rule syntax: width style color */
column-rule: 1px solid #ddd;
column-rule: 2px dashed #666;
column-rule: 3px double blue;
/* Individual properties */
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #ccc;
/* Practical examples */
/* Subtle separator */
.article {
column-count: 2;
column-gap: 2rem;
column-rule: 1px solid #e5e7eb;
}
/* Bold divider */
.sections {
column-width: 300px;
column-gap: 3rem;
column-rule: 3px solid #2563eb;
}
/* Dashed separator */
.content {
column-count: 3;
column-gap: 2rem;
column-rule: 2px dashed #9ca3af;
}
/* Match design system */
.text {
column-width: 250px;
column-gap: 2rem;
column-rule: 1px solid var(--border-color);
}
Rule vs Gap: The column rule doesn't take up space—it appears in the middle of the gap. Increasing column-rule-width doesn't affect layout.
column-span - Spanning Across Columns
Make elements span across all columns using column-span: all. Perfect for headings, images, or pullquotes.
/* Span all columns */
column-span: all;
/* Element breaks out of columns */
column-span: none;
/* Default: stays within column */
/* Practical examples */
/* Article headings */
.article {
column-count: 2;
column-gap: 2rem;
}
.article h2 {
column-span: all;
margin: 2rem 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #ddd;
}
/* Full-width images */
.article img {
column-span: all;
width: 100%;
margin: 2rem 0;
}
/* Pullquotes */
.pullquote {
column-span: all;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
padding: 2rem;
background: #f3f4f6;
margin: 2rem 0;
}
/* Section breaks */
.article hr {
column-span: all;
margin: 2rem 0;
}
Only Two Values: column-span only accepts none or all. You can't span 2 out of 3 columns—it's all or nothing.
Column Breaks - Controlling Content Flow
Control where content breaks across columns using break-inside, break-before, and break-after.
/* Prevent breaks inside elements */
break-inside: avoid;
/* Keep element together in one column */
/* Control breaks before/after */
break-before: column; /* Force break before */
break-after: column; /* Force break after */
break-before: avoid; /* Prevent break before */
break-after: avoid; /* Prevent break after */
/* Practical examples */
/* Keep images with captions */
figure {
break-inside: avoid;
}
/* Don't split headings from following content */
h2, h3 {
break-after: avoid;
}
/* Keep list items together */
li {
break-inside: avoid;
}
/* Force new column */
.section {
break-before: column;
}
/* Article sections */
.article {
column-count: 2;
column-gap: 2rem;
}
.article h2 {
break-before: column;
break-after: avoid;
}
.article blockquote {
break-inside: avoid;
margin: 1rem 0;
padding: 1rem;
background: #f9fafb;
}
/* Tables in columns */
table {
break-inside: avoid;
width: 100%;
}
Browser Hints: break-inside: avoid is a hint to the browser, not a guarantee. Browsers do their best but may break content if necessary to avoid overflow.
Key Takeaways
Multi-column: Flows text into multiple columns like newspapers/magazinescolumn-count: Fixed number of columns regardless of widthcolumn-width: Minimum column width; browser creates as many as fit (better for responsive)column-gap: Space between columns; doesn't add space at edgescolumn-rule: Visual separator between columns; syntax like borderRule placement: Column rule appears in the middle of the gap, doesn't take up spacecolumn-span: Only two values: none (default) or all (span all columns)break-inside: avoid: Try to keep element in one columnbreak-after: avoid: Prevent column break after element (good for headings)break-before: column: Force new column before elementBest for text: Multi-column works best for flowing text, not complex layoutsBalancing: Browsers automatically balance column heightsShorthand: columns: 200px 3 sets both width and count