6XC

CSS-Mehrspalten-Generator

Text in zeitungsartige Spalten fließen lassen — Anzahl, Abstand und Trennlinie — mit Live-Vorschau und CSS.

792 Aufrufe

Mehrspalten-Layout lässt langen Text nebeneinander fließen wie auf einer Zeitungsseite. Ändern Sie Anzahl und Abstand und beobachten Sie, wie dieser Beispieltext sofort neu fließt. Aktivieren Sie die Trennlinie, um eine dünne Linie zwischen den Spalten zu zeichnen. Bei langen Artikeln verkürzt es die Zeilenlänge, was das Lesen erleichtert. Mehrspalten-Layout lässt langen Text nebeneinander fließen wie auf einer Zeitungsseite. Ändern Sie Anzahl und Abstand und beobachten Sie, wie dieser Beispieltext sofort neu fließt. Aktivieren Sie die Trennlinie, um eine dünne Linie zwischen den Spalten zu zeichnen. Bei langen Artikeln verkürzt es die Zeilenlänge, was das Lesen erleichtert.

CSS Mehrspalten-Layout

column-count teilt den Inhalt eines Blocks in gleich breite Zeitungsspalten; column-gap legt den Zwischenraum fest und column-rule zeichnet eine Trennlinie (gleiche Syntax wie border). Der Text fließt automatisch von einer Spalte zur nächsten — ideal für lange Artikel, Footer und Indexlisten. Verwenden Sie break-inside: avoid für Elemente, die nicht über Spalten hinweg geteilt werden sollen.

Häufig gestellte Fragen

column-count oder column-width?

column-count legt die Spaltenanzahl fest; column-width lässt den Browser so viele Spalten mit mindestens dieser Breite wie möglich einpassen — besser für responsive Layouts. Beide können kombiniert werden.

Wie verhindere ich, dass ein Element über Spalten hinweg geteilt wird?

Geben Sie ihm break-inside: avoid; — nützlich für Karten, Bilder mit Bildunterschriften und Listenelemente.

Ähnliche Tools

CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellen CSS-Box-Shadow-Generator Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau. Erstellen CSS Border-Radius-Generator Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS. Erstellen CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellen