Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
CSS Multi-column Layout lets you split text into multiple columns like newspapers and magazines. It's perfect for articles, documentation, and any text-heavy content where you want to improve readability on wide screens.
Fixed number of columns
Auto columns based on width
Visual separators between columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Column Basics</title>
</head>
<body>
<div class="container">
<h1>📰 Multi-Column Layout</h1>
<div class="demo-section">
<h2 class="demo-title">Two Columns</h2>
<div class="article two-columns">
<p>
The CSS Multi-column Layout Module extends the block layout mode to allow the easy
definition of multiple columns of text. People have trouble reading text if lines are
too long; if it takes too long for the eyes to move from the end of one line to the
beginning of the next, they lose track of which line they were on.
</p>
<p>
Therefore, to make maximum use of a large screen, authors should have limited-width
columns of text placed side by side, just as newspapers do. This is especially useful
for articles and blog posts where you want that classic newspaper feel.
</p>
<h2>Benefits of Columns</h2>
<p>
Multi-column layout gives you an easy way to create magazine-style layouts without
complex CSS Grid or Flexbox setups. Content flows naturally from one column to the next,
making it perfect for text-heavy content like articles, documentation, and news sites.
</p>
</div>
<div class="code-label">column-count: 2; column-gap: 40px;</div>
</div>
<div class="demo-section">
<h2 class="demo-title">Three Columns</h2>
<div class="article three-columns">
<p>
When you increase the number of columns, each column becomes narrower. This works great
for wider viewports but might require media queries for smaller screens. The content
automatically balances across all columns.
</p>
<p>
Three-column layouts are commonly seen in newspapers and magazines. They provide a
nice balance between readability and space efficiency. You can use this for feature
lists, product descriptions, or any content that benefits from compact presentation.
</p>
<p>
The beauty of multi-column layout is its simplicity. With just two CSS properties,
you can create sophisticated magazine-style layouts that would otherwise require
complex positioning or grid systems.
</p>
</div>
<div class="code-label">column-count: 3; column-gap: 30px;</div>
</div>
<div class="demo-section">
<h2 class="demo-title">Auto Columns (Based on Width)</h2>
<div class="article auto-columns">
<p>
Instead of specifying a fixed number of columns, you can use column-width to let the
browser automatically create as many columns as will fit. Try resizing your browser
window to see this in action!
</p>
<p>
The browser will create as many columns as can fit given the minimum width you specify.
This makes the layout responsive without media queries. Each column will be at least
250px wide in this example.
</p>
<p>
This approach is perfect for responsive designs where you want columns on larger screens
but a single column on mobile devices. The browser handles all the layout calculations
automatically.
</p>
</div>
<div class="code-label">column-width: 250px; column-gap: 30px;</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Rules & Styling</title>
</head>
<body>
<div class="container">
<h1>📏 Column Rules</h1>
<div class="demo-grid">
<div class="demo-card">
<h3>Solid Rule</h3>
<div class="article rule-solid">
<p>
Column rules are lines drawn between columns. They're styled similarly to borders
and add visual separation. This example uses a solid line to clearly divide the columns.
</p>
<p>
The rule appears in the middle of the gap between columns and takes up no space itself.
It's purely decorative but adds a professional touch to multi-column layouts.
</p>
</div>
<div class="code">column-rule: 2px solid #f59e0b;</div>
</div>
<div class="demo-card">
<h3>Dotted Rule</h3>
<div class="article rule-dotted">
<p>
Dotted rules provide a lighter, more playful separation between columns. They're less
formal than solid lines and work well for casual content or creative layouts.
</p>
<p>
The dotted style can be made more or less prominent by adjusting the width. Thicker
dotted lines create larger dots with more visual weight.
</p>
</div>
<div class="code">column-rule: 3px dotted #f59e0b;</div>
</div>
<div class="demo-card">
<h3>Dashed Rule</h3>
<div class="article rule-dashed">
<p>
Dashed rules strike a balance between solid and dotted styles. They provide clear
separation while maintaining a lighter visual weight than solid lines.
</p>
<p>
This style is perfect for modern, clean designs where you want column separation
without heavy visual elements drawing too much attention.
</p>
</div>
<div class="code">column-rule: 2px dashed #f59e0b;</div>
</div>
<div class="demo-card">
<h3>Double Rule</h3>
<div class="article rule-thick">
<p>
Double rules create an elegant, classic look reminiscent of traditional print media.
The parallel lines add sophistication to your layout.
</p>
<p>
This style works particularly well for formal content like academic papers, legal
documents, or traditional newspaper-style layouts where a more refined aesthetic is desired.
</p>
</div>
<div class="code">column-rule: 5px double #f59e0b;</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Breaks & Spanning</title>
</head>
<body>
<div class="container">
<h1>🎯 Column Breaks & Spanning</h1>
<div class="article">
<p>
Multi-column layouts need careful control of where content breaks. Without proper break
controls, headings can end up at the bottom of one column with their content in the next,
or images can be awkwardly split.
</p>
<h2>Main Heading Spans All Columns</h2>
<p>
The heading above uses column-span: all to break out of the column layout and span across
all columns. This is perfect for major section headings that should apply to all the content below.
</p>
<h3>Break Controls</h3>
<p>
CSS provides several properties to control column breaks: break-before, break-after, and
break-inside. These let you prevent awkward splits and keep related content together.
</p>
<div class="highlight-box">
<strong>Important Note:</strong> This highlighted box uses break-inside: avoid to ensure
it doesn't split across columns. The content stays together as a cohesive unit.
</div>
<p>
Headings typically use break-after: avoid to ensure they stay with their following content.
This prevents orphaned headings at the bottom of columns—a common typographic issue in
multi-column layouts.
</p>
<div class="figure">
<div style="width: 100%; height: 80px; background: linear-gradient(135deg, #fbbf24, #f59e0b); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
Figure Content
</div>
<p class="figure-caption">Figure 1: This figure uses break-inside: avoid</p>
</div>
<h3>Best Practices</h3>
<p>
Always set break-after: avoid on headings to keep them with their content. Use break-inside: avoid
on elements like images, code blocks, and callout boxes that should never be split across columns.
</p>
<p>
For major section breaks, column-span: all is perfect. It lets important headings or content
break out of the column flow and span the full width, creating clear visual hierarchy.
</p>
<p>
Remember that break controls are suggestions to the browser, not hard rules. In constrained
spaces, the browser may still need to break content to avoid worse layout problems.
</p>
</div>
</div>
</body>
</html>Loading preview...
column-count: 3;Create 3 equal columns
column-width: 250px;Auto columns, min 250px each
column-rule: 2px solid #ccc;Add vertical line between columns
column-span: all;Span element across all columns