CSS Spalten

Zuletzt aktualisiert am 15. Februar 2026

Mit CSS Multi-Column-Layout kannst du Text automatisch in mehrere Spalten aufteilen, genau wie in einer Zeitung oder einem Magazin. Die Eigenschaft column-count legt die Anzahl der Spalten fest, column-width definiert die Mindestbreite pro Spalte, und columns ist die Kurzschreibweise für beides zusammen. Das Besondere: Der Browser verteilt den Inhalt automatisch gleichmäßig auf die Spalten, und bei weniger Platz reduziert er die Spaltenanzahl von selbst.

Grundlagen

Das Multi-Column-Layout eignet sich besonders gut für Fließtext, der in mehrere Spalten aufgeteilt werden soll. Im Gegensatz zu Flexbox oder Grid brauchst du keine zusätzlichen Wrapper-Elemente. Du setzt einfach column-count oder column-width auf einen Container, und der Browser verteilt den Inhalt automatisch.

Der Unterschied zu Flexbox und Grid: Beim Multi-Column-Layout fließt der Text von einer Spalte in die nächste, ähnlich wie in einem Buch. Flexbox und Grid sind dagegen für die Anordnung von separaten Elementen gedacht. Wenn du also einen langen Text in Spalten umbrechen willst, ist columns die richtige Wahl. Für Karten-Layouts oder komplexe Seitenstrukturen greifst du besser zu Flexbox oder Grid.

column-count gibt eine feste Spaltenanzahl vor. column-width definiert eine Mindestbreite pro Spalte, und der Browser berechnet daraus, wie viele Spalten reinpassen. Am flexibelsten bist du, wenn du column-width verwendest, weil sich die Spaltenanzahl dann automatisch an die Viewport-Breite anpasst.

Syntax & Werte

column-count

column-width

columns (Shorthand)

Die columns-Eigenschaft kombiniert column-width und column-count in einer Deklaration. Die Reihenfolge ist egal, der Browser erkennt am Typ, was was ist.

Beispiele

Einfacher Mehrspalten-Text

.three-columns {
  column-count: 3;
  line-height: 1.6;
}

<div class="columns-demo">
<div class="three-columns">
  <p>CSS Multi-Column-Layout ist eine der einfachsten Methoden, um Text in mehrere Spalten aufzuteilen. Du brauchst nur eine einzige CSS-Eigenschaft auf dem Container.</p>
  <p>Der Browser verteilt den Inhalt automatisch gleichmäßig auf alle Spalten. Wenn eine Spalte voll ist, fließt der Text in die nächste weiter.</p>
  <p>Das funktioniert ähnlich wie in einer Zeitung: Der Text läuft von oben nach unten durch die erste Spalte, dann weiter oben in der zweiten Spalte, und so weiter.</p>
  <p>Besonders praktisch ist das für lange Texte, Definitionen, Aufzählungen oder Glossare, die sonst eine sehr lange Seite erzeugen würden.</p>
</div>
</div>

Responsive Spalten mit column-width

.responsive-columns {
  column-width: 200px; /* Mindestbreite pro Spalte */
  line-height: 1.6;
}

/* Keine Media Queries nötig!
   Breiter Viewport → mehr Spalten
   Schmaler Viewport → weniger Spalten */

<div class="responsive-demo">
<div class="responsive-columns">
  <p>Mit column-width sagst du dem Browser: Jede Spalte soll mindestens 200px breit sein. Der Browser berechnet dann automatisch, wie viele Spalten in den verfügbaren Platz passen.</p>
  <p>Auf einem breiten Bildschirm bekommst du vielleicht vier oder fünf Spalten, auf einem Smartphone nur eine einzige. Ohne Media Queries, ohne Breakpoints.</p>
  <p>Das macht column-width perfekt für responsive Designs. Du musst dich nicht um verschiedene Bildschirmgrößen kümmern, der Browser erledigt das für dich.</p>
  <p>Probier es aus: Verändere die Breite dieses Containers und beobachte, wie sich die Spaltenanzahl automatisch anpasst.</p>
</div>
</div>

columns Shorthand

/* Nur Spaltenanzahl */
.text-a {
  columns: 3;
}

/* Nur Mindestbreite */
.text-b {
  columns: 180px;
}

/* Beides: maximal 3 Spalten, mindestens 200px breit */
.text-c {
  columns: 200px 3;
}

<div class="shorthand-demo">
<div>
  <div class="shorthand-label">columns: 3</div>
  <div class="shorthand-a">
    <p>Genau 3 Spalten, egal wie breit der Container ist. Der Browser teilt den Platz gleichmäßig auf.</p>
    <p>Das entspricht column-count: 3 und column-width: auto.</p>
  </div>
</div>
<div>
  <div class="shorthand-label">columns: 180px</div>
  <div class="shorthand-b">
    <p>Mindestens 180px pro Spalte. Der Browser entscheidet, wie viele Spalten reinpassen.</p>
    <p>Das entspricht column-width: 180px und column-count: auto.</p>
  </div>
</div>
<div>
  <div class="shorthand-label">columns: 200px 3</div>
  <div class="shorthand-c">
    <p>Maximal 3 Spalten, aber jede mindestens 200px breit. Wenn der Container zu schmal ist, werden es weniger Spalten.</p>
    <p>Das ist die flexibelste Variante: Du bekommst nie mehr als 3 Spalten, aber auf kleinen Bildschirmen werden es automatisch weniger.</p>
  </div>
</div>
</div>

Zeitungslayout

.newspaper-body {
  column-count: 3;
  column-gap: 28px;
  column-rule: 1px solid #d1d5db;
  line-height: 1.7;
  text-align: justify;
}

/* Initiale (großer Anfangsbuchstabe) */
.newspaper-body p:first-child::first-letter {
  font-size: 3.2em;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin: 0.05em 0.1em 0 0;
}

<div class="newspaper">
<h1 class="newspaper-title">Die Magie der CSS-Spalten</h1>
<p class="newspaper-subtitle">Von der Webseite zum Zeitungslayout in wenigen Zeilen Code</p>
<hr class="newspaper-divider">
<div class="newspaper-body">
  <p>Mehrspaltige Layouts haben eine lange Tradition in der Typografie. Seit Jahrhunderten verwenden Zeitungen, Magazine und Bücher mehrere Spalten, um Text lesbarer zu machen und den Platz auf der Seite optimal zu nutzen.</p>
  <p>Mit CSS Multi-Column-Layout bringst du dieses bewährte Konzept ins Web. Der Browser übernimmt die gesamte Arbeit: Er berechnet die Spaltenbreite, verteilt den Text gleichmäßig und sorgt für saubere Umbrüche.</p>
  <p>Anders als bei Flexbox oder Grid brauchst du keine zusätzlichen Container oder Wrapper-Elemente. Ein einziges column-count auf dem Textblock reicht aus, und der Inhalt fließt automatisch von Spalte zu Spalte.</p>
  <p>Besonders elegant wird es mit column-rule: Eine dezente Linie zwischen den Spalten verstärkt den Zeitungs-Charakter und hilft dem Auge, die Spalten voneinander zu unterscheiden. Kombiniert mit der richtigen Typografie entsteht ein professionelles Drucklayout.</p>
</div>
</div>

Barrierefreiheit

Lesereihenfolge beachten: Text in Spalten wird visuell spaltenweise dargestellt (von oben nach unten in Spalte 1, dann Spalte 2, usw.). Screen-Reader lesen den Inhalt aber in der DOM-Reihenfolge, also den gesamten Fließtext am Stück. Das ist in der Regel kein Problem, solange du den Text nicht manuell in separate Elemente pro Spalte aufteilst.

Zu viele Spalten vermeiden: Auf kleinen Bildschirmen können zu viele Spalten dazu führen, dass Nutzer ständig hin- und herscrollen müssen. Verwende column-width statt column-count, damit sich die Spaltenanzahl automatisch an den verfügbaren Platz anpasst.

Zoombarkeit sicherstellen: Wenn Nutzer die Schriftgröße vergrößern, sollte sich das Layout anpassen. Mit column-width in relativen Einheiten (z.B. 15em) funktioniert das automatisch. Feste Spaltenanzahlen können bei großer Schrift zu extrem schmalen Spalten führen.

Häufige Fehler

• column-count auf Flex- oder Grid-Container: Wenn ein Element gleichzeitig display: flex oder display: grid hat, wird column-count ignoriert. Multi-Column-Layout funktioniert nur auf Block-Level-Containern.

• Zu schmale Spalten: Bei column-count: 5 auf einem schmalen Viewport wird jede Spalte nur wenige Wörter breit. Verwende lieber column-width oder eine Kombination aus columns: 200px 5, damit der Browser die Spaltenanzahl reduziert, wenn der Platz nicht reicht.

• Fehlende column-width für Responsivität: Wer nur column-count: 3 setzt, bekommt immer 3 Spalten, auch auf dem Smartphone. Das ist selten gewünscht. Entweder column-width verwenden oder mit Media Queries die Spaltenanzahl anpassen.

• Bilder und Elemente werden zerschnitten: Ohne break-inside: avoid können Bilder, Karten oder andere Blockelemente mitten in der Spalte umgebrochen werden. Setze break-inside: avoid auf Elemente, die nicht aufgeteilt werden sollen.

• columns und column-count gleichzeitig: Da columns ein Shorthand für column-width und column-count ist, überschreibt es beide Einzelwerte. Setze nicht columns und danach column-count separat, es sei denn, du willst den Shorthand-Wert überschreiben.

Browser-Kompatibilität

CSS Multi-Column-Layout wird seit über 10 Jahren von allen Browsern vollständig unterstützt. columns, column-count und column-width funktionieren überall ohne Präfixe.

Email-Kompatibilität

CSS Columns funktionieren in den meisten E-Mail-Clients nicht. Für mehrspaltige Layouts in E-Mails musst du auf HTML-Tabellen zurückgreifen.

Verwandte Eigenschaften