CSS Multi-Column Layout: column-count, column-width und Zeitungslayout

1. Was CSS Multi-Column Layout wirklich kann

Das CSS Multi-Column Layout ist seit über einem Jahrzehnt Teil der CSS-Spezifikation, wird aber im modernen Webentwicklungs-Alltag kaum ausgeschöpft. Dabei löst es ein fundamentales Darstellungsproblem: Langer Fließtext in einem einzigen breiten Container wird auf großen Bildschirmen schwer lesbar, weil die Zeilenlänge die typografisch empfohlenen 45 bis 75 Zeichen weit überschreitet. Das CSS Multi-Column Layout teilt diesen Text automatisch in mehrere Spalten auf – wie in einer Zeitung – ohne dass JavaScript, Flexbox-Hacks oder manuelles Aufteilen von Inhalten im HTML nötig wären.

Was viele nicht wissen: Das CSS Multi-Column Layout ist nicht nur für Fließtext geeignet. Es eignet sich hervorragend für Bild-Galerien mit unterschiedlich hohen Elementen, für Listen-Layouts, für FAQ-Sections und als Masonry-ähnliche Alternative, solange die Elemente von oben nach unten und nicht von links nach rechts geordnet sein sollen. Die Kombination aus column-count, column-width, column-gap, break-inside und column-span deckt dabei eine erstaunlich breite Palette an Layout-Anforderungen ab, die mit Grid und Flexbox allein nicht so elegant zu lösen sind.

2. column-count: Spaltenanzahl exakt steuern

Die einfachste Eigenschaft im CSS Multi-Column Layout ist column-count. Sie legt fest, in wie viele Spalten der Inhalt des Containers aufgeteilt wird. Der Browser berechnet daraus automatisch die Spaltenbreite: verfügbare Containerbreite geteilt durch die Anzahl der Spalten, abzüglich der Abstände. Ein Container mit column-count: 3 bei 900 Pixeln Breite und 20 Pixeln Gap erzeugt drei Spalten zu je etwa 287 Pixeln. Der Inhalt fließt automatisch von oben nach unten und von links nach rechts in die Spalten – der Browser übernimmt das gesamte Spaltenmanagement.

Das Besondere an column-count: Der Wert auto delegiert die Berechnung an column-width. Wenn beide Eigenschaften definiert sind, interpretiert der Browser column-count als Maximum: Es werden nie mehr als die angegebene Anzahl Spalten erzeugt, aber weniger, wenn der verfügbare Platz für die minimale column-width nicht ausreicht. Dieses Zusammenspiel ist der Schlüssel zu responsivem CSS Multi-Column Layout ohne Media Queries. Die Kurzschreibweise columns: 3 200px kombiniert beide Eigenschaften in einer Deklaration.

/* Basic multi-column layout — three equal columns */
.newspaper-text {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #e2e8f0;
  orphans: 3;
  widows: 3;
}

/* Responsive: minimum column width drives the count */
.responsive-columns {
  columns: 3 220px; /* max 3 columns, min 220px each */
  column-gap: 1.5rem;
}

/* Auto-fill: as many columns as fit at 200px min */
.auto-columns {
  column-width: 200px;
  column-gap: 1rem;
}

/* Fixed count with balance */
.balanced-columns {
  column-count: 2;
  column-fill: balance; /* default: equal height columns */
}

/* Fill columns top-to-bottom (no balancing) */
.sequential-columns {
  column-count: 3;
  column-fill: auto;
  height: 400px; /* required for column-fill: auto */
}

Ein häufiges Missverständnis beim CSS Multi-Column Layout betrifft column-fill: auto. Diese Variante füllt Spalten von links nach rechts auf, statt den Inhalt gleichmäßig zu verteilen. Das ist nur dann sinnvoll, wenn der Container eine feste Höhe hat – andernfalls erzeugt auto eine einzelne überlange Spalte. In den meisten Fällen ist der Standardwert balance korrekt, der dafür sorgt, dass alle Spalten ungefähr dieselbe Höhe haben.

3. column-width: Responsive Spalten ohne Media Queries

column-width ist die intelligentere der beiden Spalten-Eigenschaften im CSS Multi-Column Layout. Sie definiert keine exakte Breite, sondern eine Mindestbreite für eine Spalte. Der Browser berechnet, wie viele Spalten dieser Mindestbreite in den Container passen, und erzeugt genau diese Anzahl – wobei die tatsächliche Spaltenbreite gleichmäßig auf den verfügbaren Platz verteilt wird. Das Ergebnis: Auf einem 1200px breiten Desktop entstehen bei column-width: 280px vier Spalten. Auf einem 600px breiten Tablet zwei. Auf einem 320px Smartphone eine. Völlig automatisch, ohne eine einzige Media Query.

Dieses Verhalten macht column-width zum idealen Werkzeug für Inhalte, deren Lesbarkeit von einer Mindestspaltenbreite abhängt. Ein Lese-Container für Fließtext sollte nie unter 220 Pixeln schrumpfen – mit column-width: 220px ist das garantiert. Das CSS Multi-Column Layout passt sich dann selbstständig an jede Bildschirmgröße an. Im Gegensatz zu Flexbox mit flex-wrap oder CSS Grid mit auto-fill entstehen dabei keine unvollständigen letzten Zeilen, weil alle Spalten denselben Container teilen und der Inhalt nahtlos überfließt.

4. column-gap und column-rule: Abstände und Trennlinien

Abstände zwischen Spalten werden im CSS Multi-Column Layout ausschließlich über column-gap gesteuert. Margins und Paddings an den Spaltenelementen selbst haben keinen Einfluss auf den Abstand zwischen Spalten. Der Standardwert ist browserspezifisch und liegt typischerweise bei 1em. Für konsistente Ergebnisse sollte column-gap immer explizit gesetzt werden. Wichtig: column-gap verwendet denselben Schlüssel wie Flexbox und Grid – seit der Vereinheitlichung der Gap-Eigenschaften in CSS Box Alignment Level 3 ist column-gap der standardisierte Name, das ältere grid-column-gap und column-gap für Multi-Column sind identisch.

Die column-rule-Eigenschaft zeichnet eine Trennlinie zwischen Spalten – ähnlich wie border, aber ohne den Layout-Fluss zu beeinflussen, da sie keinen Platz einnimmt. Die Trennlinie liegt mittig im column-gap. Die Kurzform column-rule: 1px solid #94a3b8 entspricht der kombinierten Schreibweise aus column-rule-width, column-rule-style und column-rule-color. Für Zeitungslayouts ist eine dezente column-rule typografisch wichtig, um die Spalten visuell zu trennen, ohne dass der Inhalt verschwindet.

/* Column gap and decorative rule */
.editorial-columns {
  column-count: 3;
  column-gap: 3rem;
  column-rule: 1px solid #cbd5e1;
}

/* Wide gap with thick decorative rule */
.magazine-layout {
  columns: 2 300px;
  column-gap: 4rem;
  column-rule: 3px double #7c3aed;
}

/* Invisible gap — no rule, purely spatial */
.clean-columns {
  column-count: 4;
  column-gap: 1.5rem;
  /* no column-rule for a clean, borderless look */
}

/* Gap with CSS custom properties for theming */
.themed-columns {
  --col-gap: clamp(1rem, 3vw, 3rem);
  column-count: 3;
  column-gap: var(--col-gap);
  column-rule: 1px solid var(--color-border, #e2e8f0);
}

/* Responsive gap via clamp */
.fluid-gap-columns {
  column-width: 240px;
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
}

5. break-inside: Inhalte vor dem Zerreißen schützen

Das größte praktische Problem beim CSS Multi-Column Layout ist das Zerreißen von Inhalten an Spaltengrenzen. Karten, Bilder mit Bildunterschriften, Zitate und Formular-Blöcke sollen niemals mitten in einer Spalte enden und in der nächsten fortgesetzt werden. Die Eigenschaft break-inside: avoid verhindert genau das: Der Browser schiebt das gesamte Element in die nächste Spalte, statt es aufzuteilen. Das ist das wichtigste Control-Property im CSS Multi-Column Layout und sollte für alle Block-Elemente gesetzt werden, die als geschlossene Einheit wahrgenommen werden sollen.

Ergänzend gibt es break-before und break-after mit den Werten column und avoid-column. Mit break-before: column beginnt ein Element immer in einer neuen Spalte – nützlich für Abschnitte, die immer am Spaltenanfang stehen sollen. Mit break-after: avoid-column wird verhindert, dass nach einem Element eine Spaltenunterbrechung eingefügt wird – ideal für Überschriften, die nie am Ende einer Spalte stehen sollen, während der zugehörige Paragraf erst in der nächsten Spalte beginnt. Die orphans und widows-Eigenschaften steuern zusätzlich, wie viele Textzeilen mindestens am Anfang oder Ende einer Spalte verbleiben müssen.

/* Prevent card from splitting across columns */
.card {
  break-inside: avoid;
  /* older prefixed property for legacy support */
  -webkit-column-break-inside: avoid;
}

/* Heading always starts a new column */
.section-heading {
  break-before: column;
}

/* Heading never stranded at bottom of column */
h2, h3 {
  break-after: avoid-column;
}

/* Keep image with its caption */
figure {
  break-inside: avoid;
  margin: 0 0 1.5rem 0;
}

/* Minimum lines before / after a column break */
.article-text {
  column-count: 3;
  column-gap: 2rem;
  orphans: 3;
  widows: 3;
}

/* Gallery items — each stays intact */
.gallery-item {
  break-inside: avoid;
  display: inline-block; /* triggers block formatting context */
  width: 100%;
}

6. column-span: Elemente über alle Spalten strecken

Mit column-span: all wird ein Element aus dem Spaltenfluss herausgehoben und erstreckt sich über die gesamte Breite des Multi-Column-Containers. Das ist das klassische Zeitungsmuster für große Überschriften und Aufmacher-Bilder, die den vollen Spaltencontainer überspannen, während der restliche Text normal in Spalten fließt. Wichtig: column-span akzeptiert nur die Werte none (Standard) und all – es ist nicht möglich, ein Element über genau zwei von drei Spalten zu strecken.

Das CSS Multi-Column Layout behandelt Elemente mit column-span: all als Unterbrechung: Der Inhalt vor dem Spanning-Element wird in Spalten aufgeteilt und endet dort. Nach dem Spanning-Element beginnt ein neuer Spaltenblock. Dieser Mechanismus ermöglicht komplexe Editorial-Layouts direkt im Browser, die früher nur mit negativen Margins, absolut positionierten Elementen oder JavaScript zu erreichen waren. Aus typografischer Sicht ist column-span: all das präziseste Werkzeug für strukturelle Gliederung innerhalb eines CSS Multi-Column Layout-Containers.

7. Masonry-Alternative mit CSS Multi-Column Layout

Das Masonry-Layout – bei dem Elemente unterschiedlicher Höhe in einem Raster wie Steine in einer Mauer gestapelt werden – wird oft als reines JavaScript-Problem behandelt. Das CSS Multi-Column Layout ist eine funktionale Alternative für Fälle, in denen die Reihenfolge von oben nach unten akzeptabel ist. Karten unterschiedlicher Höhe werden in einen Multi-Column-Container gelegt, jede Karte erhält break-inside: avoid, und der Browser stapelt sie automatisch spaltenweise. Das Ergebnis sieht visuell wie Masonry aus, der Unterschied liegt in der Leserichtung: Multi-Column liest sich vertikal (Spalte 1 von oben nach unten, dann Spalte 2), klassisches Masonry-Grid horizontal.

Für viele Anwendungsfälle – Bildgalerien, Testimonials, Blog-Karten, FAQ-Listen – ist die vertikale Leserichtung völlig akzeptabel. Das CSS Multi-Column Layout hat dabei einen klaren Vorteil gegenüber JavaScript-Masonry: Es funktioniert ohne JavaScript, ist vollständig accessibel, und der Browser berechnet die Höhen der Elemente korrekt auch dann, wenn sie Bilder, dynamisch geladene Inhalte oder komplexe Typografie enthalten. Die Performance ist deutlich besser als JavaScript-Lösungen, die bei Resize-Events neu berechnen müssen.

8. Zeitungslayout: Klassische Editorial-Designs im Browser

Das Zeitungslayout ist der Ursprung des CSS Multi-Column Layout-Moduls. Die klassische Zeitung hat mehrere Spalten, der Aufmacher überspannt alle Spalten, Bilder können über eine oder mehrere Spalten gehen (wobei letzteres im CSS Multi-Column Layout nur als ganzer Container geht), und Trennlinien zwischen Spalten sorgen für typografische Struktur. Diese Gestaltungsprinzipien lassen sich direkt mit dem CSS Multi-Column Layout umsetzen: Ein Artikel-Container mit column-count: 3, eine Schlagzeile mit column-span: all, Paragraphen mit orphans: 3 und widows: 3, und zwischen Spalten eine dezente column-rule.

In der Praxis kombiniert man das CSS Multi-Column Layout mit CSS Grid für den äußeren Seitenaufbau. Das Grid definiert die Hauptbereiche (Header, Sidebar, Hauptinhalt, Footer), während das Multi-Column-Modul innerhalb des Hauptinhalt-Bereichs den Fließtext in Spalten aufteilt. Diese Trennung von Makro-Layout (Grid) und Mikro-Layout (Multi-Column) ist architektonisch sauber und entspricht dem ursprünglichen CSS-Designprinzip, dass unterschiedliche Module unterschiedliche Layout-Ebenen übernehmen sollen.

9. CSS Multi-Column Layout im direkten Vergleich

Das CSS Multi-Column Layout konkurriert in bestimmten Anwendungsfällen mit Flexbox, CSS Grid und JavaScript-basierten Masonry-Bibliotheken. Die Entscheidung zwischen diesen Techniken hängt von der gewünschten Leserichtung, der Anforderung an gleichmäßige Spaltenbreiten und dem Bedarf nach exakter Positionierung ab. Flexbox und Grid eignen sich für Makro-Layouts, bei denen jedes Element in einer exakten Zelle oder an einer exakten Flexbox-Position liegen soll. Das CSS Multi-Column Layout eignet sich für Inhalte, die als fließender Text oder als unstrukturierte Elementsammlung behandelt werden sollen, bei denen die genaue Position jedes Elements egal ist, solange das Gesamtbild stimmt.

Der wichtigste Vorteil des CSS Multi-Column Layout gegenüber JavaScript-Masonry ist die automatische Höhenberechnung. JavaScript-Bibliotheken wie Masonry.js müssen die Höhe jedes Elements messen, Bilder abwarten und bei Resize-Events alles neu berechnen. Das CSS Multi-Column Layout delegiert all das an den Browser-Rendering-Engine, der diese Berechnungen intern mit deutlich geringerem Overhead durchführt. Das Ergebnis: schnelleres initiales Rendering, keine FOUC-Effekte (Flash of Unstyled Content) und vollständige Funktionsfähigkeit ohne JavaScript.

/* Complete editorial / newspaper layout */
.article-body {
  column-count: 3;
  column-gap: 2.5rem;
  column-rule: 1px solid #e2e8f0;
  orphans: 3;
  widows: 3;
  text-align: justify;
  hyphens: auto;
}

/* Full-width headline inside column container */
.article-body > h1,
.article-body > .lead-image {
  column-span: all;
  margin-bottom: 2rem;
}

/* Cards / callouts never split */
.article-body .callout,
.article-body figure,
.article-body blockquote {
  break-inside: avoid;
}

/* Masonry-like gallery without JavaScript */
.masonry-gallery {
  columns: 4 200px;
  column-gap: 1rem;
}

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

/* Responsive article: 1 column on mobile, up to 3 on desktop */
@media (max-width: 640px) {
  .article-body {
    column-count: 1;
  }
}

10. Zusammenfassung

Das CSS Multi-Column Layout ist ein natives Browser-Feature, das Zeitungslayouts, Masonry-ähnliche Galerien und responsive Textaufteilung ohne JavaScript ermöglicht. column-count legt die exakte Spaltenanzahl fest. column-width definiert eine Mindestbreite und erzeugt damit automatisch responsives Verhalten ohne Media Queries. column-gap steuert den Abstand zwischen Spalten, column-rule fügt typografische Trennlinien hinzu, ohne den Layout-Fluss zu beeinflussen. break-inside: avoid schützt Karten, Bilder und andere Block-Elemente davor, an Spaltengrenzen zerrissen zu werden.

Der entscheidende Vorteil des CSS Multi-Column Layout gegenüber JavaScript-Alternativen liegt in der nativen Höhenberechnung des Browsers, der fehlenden JavaScript-Abhängigkeit und der automatischen Accessibility. Wer das Modul bisher ignoriert hat, wird überrascht sein, wie viele Layout-Anforderungen – von FAQ-Sections über Bildgalerien bis hin zu Editorial-Artikeln – damit elegant gelöst werden können, ohne eine Zeile JavaScript zu schreiben.

11. FAQ: CSS Multi-Column Layout