Spalten-Styling

Zuletzt aktualisiert am 15. Februar 2026

Nachdem du mit columns oder column-count ein Mehrspalten-Layout erstellt hast, kannst du es mit weiteren Eigenschaften verfeinern. column-gap steuert den Abstand zwischen den Spalten, column-rule zeichnet eine Trennlinie dazwischen, column-span lässt Elemente wie Überschriften über alle Spalten hinweg laufen, und column-fill bestimmt, ob der Inhalt gleichmäßig verteilt oder der Reihe nach aufgefüllt wird.

Grundlagen

column-gap definiert den Abstand zwischen den Spalten. Ohne expliziten Wert verwendet der Browser den Standard normal, der meist 1em entspricht. Du kannst beliebige Längeneinheiten verwenden (px, rem, em, etc.). Übrigens: column-gap ist dieselbe Eigenschaft, die auch bei Flexbox und Grid funktioniert.

column-rule ist die Kurzschreibweise für eine Trennlinie zwischen den Spalten. Sie funktioniert genau wie die border-Eigenschaft: Du gibst Breite, Stil und Farbe an. Die Trennlinie nimmt keinen zusätzlichen Platz ein, sondern wird in der Mitte des column-gap gezeichnet. Du kannst auch die Einzelwerte column-rule-width, column-rule-style und column-rule-color verwenden.

column-span ermöglicht es einem Element, aus dem Spaltenfluss auszubrechen und sich über alle Spalten zu erstrecken. Das ist perfekt für Zwischenüberschriften, Zitate oder Banner innerhalb eines Mehrspalten-Textes. Es gibt nur zwei Werte: none (Standard) und all.

column-fill steuert, wie der Inhalt auf die Spalten verteilt wird. Mit balance (Standard) verteilt der Browser den Inhalt möglichst gleichmäßig. Mit auto füllt er die Spalten der Reihe nach auf, was nur bei einer festen Höhe des Containers sichtbar wird.

Syntax & Werte

column-gap

column-rule (Shorthand)

column-rule kombiniert Breite, Stil und Farbe in einer Deklaration, genau wie border.

column-rule-width, column-rule-style, column-rule-color

Die Einzelwerte von column-rule für gezielte Änderungen.

column-span

column-fill

Beispiele

column-gap: Verschiedene Abstände

.gap-small {
  column-count: 3;
  column-gap: 10px; /* Eng */
}

.gap-medium {
  column-count: 3;
  column-gap: 40px; /* Mittel (empfohlen) */
}

.gap-large {
  column-count: 3;
  column-gap: 80px; /* Weit */
}

<div class="gap-demo">
<div>
  <div class="gap-label">column-gap: 10px</div>
  <div class="gap-small">
    <p>Ein schmaler Abstand von 10px zwischen den Spalten. Die Spalten rücken eng zusammen, was bei schmalen Containern Platz spart.</p>
    <p>Allerdings wird der Text schwerer lesbar, weil die Spalten kaum voneinander getrennt sind.</p>
  </div>
</div>
<div>
  <div class="gap-label">column-gap: 40px</div>
  <div class="gap-medium">
    <p>Ein mittlerer Abstand von 40px ist ein guter Kompromiss. Die Spalten sind klar getrennt, ohne zu viel Platz zu verschwenden.</p>
    <p>Dieser Wert eignet sich gut für die meisten Layouts mit Fließtext.</p>
  </div>
</div>
<div>
  <div class="gap-label">column-gap: 80px</div>
  <div class="gap-large">
    <p>Ein großer Abstand von 80px gibt dem Layout viel Luft. Das wirkt edel und eignet sich für Magazin-Layouts.</p>
    <p>Auf schmalen Bildschirmen kann so viel Abstand aber problematisch werden.</p>
  </div>
</div>
</div>

column-rule: Trennlinien-Stile

.rule-solid {
  column-rule: 1px solid #d1d5db;
}

.rule-dotted {
  column-rule: 2px dotted #7c3aed;
}

.rule-dashed {
  column-rule: 2px dashed #059669;
}

.rule-double {
  column-rule: 4px double #1a56db;
}

<div class="rule-demo">
<div>
  <div class="rule-label">solid</div>
  <div class="rule-solid">
    <p>Eine durchgezogene Linie ist der Klassiker. Dezent und unauffällig, perfekt für Zeitungslayouts und Textspalten.</p>
    <p>Die Linie wird in der Mitte des column-gap gezeichnet und nimmt keinen extra Platz ein.</p>
  </div>
</div>
<div>
  <div class="rule-label">dotted</div>
  <div class="rule-dotted">
    <p>Gepunktete Linien wirken etwas verspielter. Sie eignen sich gut für kreative Layouts oder informelle Inhalte.</p>
    <p>Die Punkte werden gleichmäßig zwischen den Spalten verteilt.</p>
  </div>
</div>
<div>
  <div class="rule-label">dashed</div>
  <div class="rule-dashed">
    <p>Gestrichelte Linien sind ein Mittelweg zwischen solid und dotted. Sie sind auffälliger als durchgezogene Linien, aber nicht so verspielt wie Punkte.</p>
    <p>Gut geeignet für technische Dokumentationen oder Tutorials.</p>
  </div>
</div>
<div>
  <div class="rule-label">double</div>
  <div class="rule-double">
    <p>Doppelte Linien wirken elegant und formell. Sie erinnern an klassische Buchgestaltung und eignen sich für hochwertige Layouts.</p>
    <p>Für double brauchst du mindestens 3px Breite, damit beide Linien sichtbar sind.</p>
  </div>
</div>
</div>

column-span: Überschrift über alle Spalten

.span-content {
  column-count: 3;
  column-gap: 32px;
  column-rule: 1px solid #e5e7eb;
}

/* Erstreckt sich über alle Spalten */
.span-heading {
  column-span: all;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border-top: 2px solid #1a56db;
  border-bottom: 2px solid #1a56db;
  padding: 16px 0;
}

.span-quote {
  column-span: all;
  font-style: italic;
  text-align: center;
  padding: 12px 24px;
  background: #f5f3ff;
}

<div class="span-demo">
<div class="span-content">
  <p>Dieser Text fließt ganz normal durch die drei Spalten. Die column-span Eigenschaft ermöglicht es dir, einzelne Elemente aus dem Spaltenfluss herauszunehmen.</p>
  <p>Das ist besonders nützlich für Zwischenüberschriften, die den gesamten Textbereich überspannen sollen.</p>
  <h2 class="span-heading">Zwischenüberschrift über alle Spalten</h2>
  <p>Nach der Überschrift fließt der Text wieder normal durch die Spalten weiter. Der Browser verteilt den restlichen Inhalt gleichmäßig.</p>
  <p>Das funktioniert auch mit Zitaten, Bildern oder anderen Elementen, die über die volle Breite gehen sollen.</p>
  <div class="span-quote">„Gutes Design ist so wenig Design wie möglich." (Dieter Rams)</div>
  <p>Auch nach einem Zitat-Block geht der normale Spaltenfluss weiter. column-span: all unterbricht den Fluss, und danach fängt ein neuer Spaltenblock an.</p>
  <p>Du kannst beliebig viele Elemente mit column-span: all ausstatten. Jedes davon erzeugt einen eigenen Umbruch im Layout.</p>
</div>
</div>

column-fill: auto vs. balance

/* Gleichmäßige Verteilung (Standard) */
.fill-balance {
  column-count: 3;
  column-fill: balance;
  height: 200px;
}

/* Spalten der Reihe nach füllen */
.fill-auto {
  column-count: 3;
  column-fill: auto;
  height: 200px; /* Feste Höhe erforderlich! */
}

<div class="fill-demo">
<div class="fill-col">
  <div class="fill-label fill-label-balance">column-fill: balance</div>
  <div class="fill-balance">
    <p>Bei balance verteilt der Browser den Inhalt möglichst gleichmäßig auf alle Spalten.</p>
    <p>Das bedeutet: Alle Spalten sind ungefähr gleich hoch.</p>
    <p>Das ist der Standard und meistens das gewünschte Verhalten.</p>
  </div>
</div>
<div class="fill-col">
  <div class="fill-label fill-label-auto">column-fill: auto</div>
  <div class="fill-auto">
    <p>Bei auto füllt der Browser die Spalten der Reihe nach. Erst wenn Spalte 1 voll ist, fließt der Text in Spalte 2.</p>
    <p>Das bedeutet: Die letzte Spalte kann deutlich kürzer sein als die erste.</p>
    <p>Dieser Effekt ist nur bei einer festen Höhe sichtbar.</p>
  </div>
</div>
</div>

Barrierefreiheit

Lesereihenfolge bei column-span: Wenn ein Element mit column-span: all den Spaltenfluss unterbricht, lesen Screen-Reader den Text in der DOM-Reihenfolge. Das bedeutet: Der Text vor dem Spanning-Element kommt zuerst, dann das Element selbst, dann der Text danach. Das entspricht dem visuellen Verhalten und ist unproblematisch.

Fokus-Reihenfolge bei column-span: Interaktive Elemente (Links, Buttons) innerhalb eines Mehrspalten-Layouts werden in DOM-Reihenfolge fokussiert, nicht in der visuellen Spaltenreihenfolge. Bei column-span: all sorge dafür, dass die Tab-Reihenfolge logisch bleibt.

column-rule und Kontrast: Die Trennlinie zwischen Spalten hilft sehenden Nutzern, die Spalten voneinander zu unterscheiden. Achte darauf, dass die column-rule-color genug Kontrast zum Hintergrund hat. Screen-Reader ignorieren die Trennlinie, da sie rein dekorativ ist.

Häufige Fehler

• column-rule ohne column-rule-style: Wenn du nur column-rule-width und column-rule-color setzt, aber keinen column-rule-style, bleibt der Standardwert none und die Linie ist unsichtbar. Setze immer mindestens column-rule-style: solid.

• column-span auf Nicht-Direct-Children: column-span: all funktioniert nur auf direkten Kindelementen des Mehrspalten-Containers. Wenn dein Element in einem Wrapper verschachtelt ist, wird column-span ignoriert.

• column-fill: auto ohne feste Höhe: column-fill: auto hat nur einen sichtbaren Effekt, wenn der Container eine feste Höhe (height) hat. Ohne feste Höhe wächst der Container mit dem Inhalt, und balance und auto sehen identisch aus.

• column-gap: 0 erwartet, dass Spalten aneinander kleben: Mit column-gap: 0 haben die Spalten keinen Abstand, aber Text kann trotzdem am Spaltenrand umbrechen und schwer lesbar wirken. Ein Mindestabstand von 1em ist empfehlenswert.

• column-rule-width breiter als column-gap: Wenn die Trennlinie breiter als der Spaltenabstand ist, überlappt sie den Text. Stelle sicher, dass column-rule-width immer kleiner als column-gap ist.

Browser-Kompatibilität

Alle Spalten-Styling-Eigenschaften werden von sämtlichen modernen Browsern vollständig unterstützt. column-span hatte früher Probleme in Firefox, funktioniert aber seit Firefox 71 (2019) einwandfrei.

Email-Kompatibilität

Spalten-Styling-Eigenschaften werden in E-Mail-Clients nicht unterstützt. Für mehrspaltige E-Mail-Layouts verwende HTML-Tabellen mit festen Breiten.

Verwandte Eigenschaften