CSS3 Text auf mehrere Spalten verteilen

Wer einen Text auf mehrere Spalten verteilen will, kann mit Css3 die Funktionalität des Multi-Column-Layout-Moduls nutzen. Das ist recht einfach umgesetzt, im Prinzip gibt man entweder die Anzahl der Spalten, oder die gewünschte Breite der Spalten vor.

Man erhält dann das von Printmedien gewohnte Layout des Fliesstextes über mehrere Spalten. Kombinieren kann man das ganze zudem noch prima mit text-align: justify und hyphens: auto.

{
column-count: 3;
column-width: 150px;
}

Wenn einer der beiden Werte column-count oder column-width nicht den Wert „auto“ hat, wird das Multi-Column-Modul „aktiviert“, will sagen, einer der beiden Werte muss anders als „auto“ definiert sein, um die mehrspaltigen Darstellung zu erwirken.

Gibt man für nur column-Count z. B. mit „3“ vor, stellt der Browser 3 Spalten mit variabler Breite dar. Gibt man für column-width z. B. mit „150px“ vor, stellt der Browser „x“ Spalten mit jeweils 150px Breite dar (x ist abhänging von der Breite des viewports).

Wählt man für column-count den Wert: „3“ und für column-width: 300px, stellt der Browser erst dann 3 Spalten dar, wenn der viewport 3*300px (inkl. padding, etc.) zulässt, ansonsten so viele Spalten mit jeweils 300px wie möglich, aber nie mehr als 3.

Hier ein Beispiel mit column-count: 3 und column-width: 130px:

Wenn einer der beiden Werte column-count oder column-width nicht den Wert „auto“ hat, wird das Multi-Column-Modul „aktiviert“, will sagen, einer der beiden Werte muss anders als „auto“ definiert sein, um die mehrspaltigen Darstellung zu erwirken.
Gibt man für nur column-count z. B. mit „3“ vor, stellt der Browser 3 Spalten mit variabler Breite dar. Gibt man für column-width z. B. mit „150px“ vor, stellt der Browser „x“ Spalten mit jeweils 150px Breite dar (x ist abhänging von der Breite des viewports).
Wählt man für column-count den Wert: „3“ und für column-width: 300px, stellt der Browser erst dann 3 Spalten dar, wenn der viewport 3*300px (inkl. padding, etc.) zulässt, ansonsten so viele Spalten mit jeweils 300px wie möglich, aber nie mehr als 3.

Zur Verfeinerung stehen noch weitere Eigenschaften im Multi-Column-Layout-Modul zur Verfügung: column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, break-before, break-after, break-inside, column-span, column-fill.

Was man aber hier immer beachten sollte:
Eine Webseite ist keine Zeitschrift in einer fest definierten Größe. Ein kleiner Text in mehreren Spalten mag die Lesbarkeit erhöhen, bei einem längeren Text in mehreren Spalten muss man unter Umständen statt einmal runterzuscrollen, mehrmals hoch und runter. Unterschiedliche Geräte und Viewports sollte man gerade hier immer bei seinen Entscheidungen berücksichtigen.