CSS-Spalten-Generator
Mehrspaltigen Text mit column-count oder column-width, Abstand und Trennlinie gestalten – Live-Vorschau, CSS und Tailwind.
Der CSS-Spalten-Generator verteilt Text automatisch auf mehrere Spalten wie in einer Zeitung. Du wählst eine feste Spaltenzahl oder eine Mindestbreite, aus der sich die Zahl responsiv ergibt, dazu Abstand und Trennlinie. Überschriften über alle Spalten und zusammenhängende Blöcke sind per Schalter möglich. Ausgabe als CSS und Tailwind.
.columns {
column-count: 3;
column-gap: 32px;
column-rule: 1px solid #cbd5e1;
}
.columns h2 {
column-span: all;
margin-bottom: 1rem;
}
.columns > * {
break-inside: avoid;
}Mehrspaltiges Layout mit CSS
Das CSS-Modul Multi-column verteilt Inhalte automatisch auf Spalten. Anders als bei Grid oder Flexbox fließt der Inhalt von einer Spalte in die nächste, wie in einer Zeitung.
| Eigenschaft | Wirkung |
|---|---|
column-count | Feste Spaltenzahl |
column-width | Mindestbreite, Anzahl ergibt sich |
column-gap | Abstand zwischen Spalten |
column-rule | Trennlinie im Abstand |
column-span: all | Element über alle Spalten |
Für Layouts mit Zeilen und Spalten nutzt du den CSS-Grid-Generator, ganze Seitengerüste den CSS-Layout-Generator.
Häufige Fragen
column-count oder column-width?
column-count legt eine feste Zahl fest, die Spalten werden auf schmalen Bildschirmen sehr schmal. column-width gibt eine Mindestbreite vor; der Browser bildet so viele Spalten, wie hineinpassen. Für responsive Seiten ist column-width meist die bessere Wahl.
Wie verhindere ich, dass ein Block zerrissen wird?
break-inside: avoid an Absätzen, Bildern, Karten oder Zitaten sorgt dafür, dass sie vollständig in einer Spalte bleiben.
Wann sind Spalten ungeeignet?
Wenn der Text länger als der Bildschirm ist, muss man zum Weiterlesen wieder nach oben scrollen. Mehrspaltigen Fließtext also nur für kurze Abschnitte nutzen; für Kartenraster ist CSS Grid besser.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.