CSS Mehrspaltenlayout

Optional Advanced hat gerade Image-Sprites behandelt — ein Sheet, viele Kacheln. Diese Session ist ein anderes optionales Werkzeug: Mehrspalten. Denk an eine Zeitung, nicht an eine Toolbar. Du bittest CSS, einen langen Artikel in zwei oder drei senkrechte Ströme zu gießen. Du platzierst keine unabhängigen Karten auf einem Grid.

Direkte Antwort

CSS-Mehrspaltenlayout teilt einen fließenden Inhaltsblock — meist langen Text — in Zeitungs-Spalten. Du setzt die Anzahl (column-count), eine angenehme Spaltenbreite (column-width), die Gasse (column-gap) und optional eine senkrechte Linie (column-rule). Text, Listen und Inline-Inhalt füllen die erste Spalte, dann die nächste. Nutze es für langen Fließtext. Für Navigation, Kartendecks und Seitengerüst bleib bei Flexbox oder Grid, damit jede Box eine ganze Einheit bleibt.

Warum es Spalten gibt

Lange Zeilen sind schwer zu lesen. Magazine lösten das mit mehreren kürzeren Spalten auf einer Seite. CSS übernahm die Idee fürs Web: ein Element, ein Textstrom, automatisches Umbrechen in Spalten. Das ist nicht Flexbox (eine Zeile oder Spalte von Items) und nicht Grid (eine zweidimensionale Flächenkarte). Mehrspalten ist ein Fragmentierungs-Werkzeug — der Browser darf einen Absatz an der Spaltengrenze teilen, wenn du es nicht verhinderst.

Anzahl: „Ich will drei Spalten“

column-count verlangt eine Zahl. Der Browser teilt die Containerbreite durch diese Anzahl (minus Abstände):

Bei einem breiten Artikel siehst du drei Ströme. Auf einem schmalen Handy werden drei dünne Spalten unlesbar — kombiniere das mit einer Media Query oder bevorzuge column-width, damit die Anzahl bei wenig Platz sinkt.

Breite: „jede Spalte ungefähr so breit“

column-width ist ein Hinweis, kein festes Pixel-Gitter. Der Browser erzeugt so viele Spalten mit mindestens dieser Breite, wie passen:

Ist die Box etwa 48rem plus Gaps, siehst du vielleicht drei Spalten; schrumpft sie, zwei, dann eine. Das ist meist ruhiger als ein fixes column-count: 3 auf jedem Viewport. Du kannst beides setzen: die Anzahl als Maximum, die Breite als Mindestkomfort. Das Kürzel columns ist zuerst Breite, dann Anzahl, z. B. columns: 16rem 3.

Abstand und Linie

Spalten brauchen Luft. column-gap ist die Gasse. column-rule zeichnet eine dünne Linie darin (Breite, Stil, Farbe — wie ein Border, nimmt aber keinen Extra-Layoutplatz wie ein Box-Rand):

Es gibt Teil-Shorthands (column-rule-width, column-rule-style, column-rule-color). Halte die Linie dezent; sie ist ein Zeitungs-Trenner, kein zweites Designsystem.

Eine Überschrift über alle Spalten

Ein Titel soll oft über die volle Breite sitzen, darunter beginnen die Spalten. column-span: all auf einem Kind macht das:

Im Alltag gibt es praktisch none und all. Span ist für Überschrift, Leitfigur oder Callout — nicht für jeden Absatz.

Boxen nicht zerschneiden

Eine Karte, eine Figure mit Caption oder ein Zitat wirkt kaputt, wenn der Spaltenumbruch sie halbiert. break-inside: avoid bittet den Browser, die Box in einer Spalte zu halten, wenn möglich:

Nützlich auch: break-before / break-after in druckähnlichen Flüssen und das ältere page-break-inside: avoid als Fallback. Du gewinnst nicht jeden Kampf — sehr hohe Boxen laufen über — aber Captions bei Bildern bleiben das übliche Ziel. column-fill: balance (oft der Default) gleicht Spaltenhöhen an; auto füllt zuerst die erste Spalte (eher wie ein Zeitungs-Sprung).

Spalten vs Flex vs Grid

Die Flexbox- und Grid-Module haben Item-Platzierung gelehrt. Mehrspalten gibt dir kein justify-content und keine benannten Areas. Es fließt ein Strom. Soll jedes Kind ein klickbares Rechteck bleiben, nimm Flex oder Grid.

Seitengerüst bleibt Flex oder Grid

Mach nicht die ganze Site zu column-count: 3. Header, Nav und Kartendeck wollen ganze Boxen:

.prose darf mehrspaltig sein. .card-deck sollte es nicht. Beides auf demselben Element zerschneidet Figures und setzt Buttons in den falschen Strom.

Schmale Screens und Lesereihenfolge

Werden Spalten schmaler als eine komfortable Zeile (etwa 12–16rem Text), geh auf eine Spalte. Screenreader und Tastatur folgen der Dokumentreihenfolge, nicht „erst eine Spalte runter, dann die nächste“ als Sichtscan — in Ordnung für einen Artikel, ungeschickt wenn du mit Spalten ein Dashboard unzusammenhängender Widgets fälschst. In RTL-Sprachen füllen sich Spalten nach dem Writing Mode; die Linie sitzt trotzdem in der Gasse.

Probier es selbst

1. Packe ein paar Absätze in .prose und setze column-count: 2 plus column-gap.
2. Wechsle zu column-width: 16rem und ziehe das Fenster — beobachte die Anzahl.
3. Füge column-rule: 1px solid in ruhigem Grau hinzu.
4. Setze ein <h2> mit column-span: all.
5. Wickle eine Figure in break-inside: avoid. Dann dieselbe CSS auf ein Karten-Grid — merke, warum Flex/Grid dort ruhiger ist.

Typische Fehler

• Mehrspalten als Kartengalerie oder ganzes Seitenlayout
• column-count: 3 auf dem Handy erzwingen, bis Zeilen drei Wörter halten
• column-gap vergessen, sodass Ströme verkleben
• Bilder und Captions über die Spaltengrenze teilen
• Spalten wie Flex behandeln: es gibt kein flex-grow für einen Spaltenstrom
• Verwechslung mit Image-Sprites — Sprites beschneiden einen Hintergrund; Spalten fragmentieren Text

Zusammenfassung

• Mehrspalten gießt einen fließenden Strom in Zeitungs-Spalten
• column-count ist eine Zahl; column-width ein Mindestkomfort; beides kombinierbar
• column-gap und column-rule gestalten die Gasse; Titel mit column-span: all
• break-inside: avoid hält Figures und Callouts möglichst ganz
• Flex und Grid gehören weiter zum Seitengerüst und zu Kartendecks
• Optional Advanced geht als Nächstes mit Maskierung (masking) weiter