Multi-column Layout

CSS columns, column breaks, and newspaper-style layouts.

Overview

Multi-column layout creates newspaper-style text columns.

Key Concepts

• columns — Shorthand for column-count and column-width
• column-count — Number of columns
• column-width — Minimum column width
• column-gap — Space between columns
• column-rule — Border between columns

Code Examples

/* Basic multi-column */
.newspaper {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

/* Responsive columns */
.responsive-columns {
  column-width: 300px;
  column-gap: 2rem;
}

/* Column breaks */
.article {
  column-count: 2;
  column-gap: 3rem;
}

.article h2 {
  column-span: all;
  margin-bottom: 1rem;
}

.article .pull-quote {
  column-span: all;
  font-size: 1.5rem;
  font-style: italic;
  text-align: center;
  margin: 2rem 0;
  padding: 1rem;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

/* Break control */
.avoid-break {
  break-inside: avoid;
}

.page-break {
  break-before: page;
}

/* Masonry-like layout */
.masonry {
  column-count: 3;
  column-gap: 1rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Image gallery */
.gallery {
  column-count: 4;
  column-gap: 0.5rem;
}

.gallery img {
  width: 100%;
  break-inside: avoid;
  margin-bottom: 0.5rem;
}

/* Balanced columns */
.balanced {
  column-count: 2;
  column-fill: balance;
}

/* Text columns with drop cap */
.drop-cap::first-letter {
  float: left;
  font-size: 4rem;
  line-height: 0.8;
  padding-right: 0.5rem;
  font-weight: bold;
}

Practice

Build a newspaper-style article layout with multi-column text.