Verwendung von Multi-Column-Layouts
Die im CSS-Multi-Column-Layout-Modul definierten Eigenschaften erweitern den Block-Layout-Modus und ermöglichen die einfache Definition von mehreren Textspalten. Menschen haben Schwierigkeiten, Text zu lesen, wenn die Zeilen zu lang sind. Wenn es zu lange dauert, bis die Augen von einem Zeilenende zum Anfang der nächsten Zeile springen, können Leser den Überblick verlieren, wo sie gerade waren. Um eine bessere Benutzererfahrung beim Lesen von Text auf einem großen Bildschirm zu bieten, sollten Sie die Breite des Textes begrenzen, indem Sie nebeneinanderliegende Textspalten verwenden, wie es Zeitungen tun.
Verwendung von Spalten
Spaltenanzahl und -breite
Zwei CSS-Eigenschaften steuern, ob und wie viele Spalten erscheinen: column-count und column-width.
Die Eigenschaft column-count legt die Anzahl der Spalten auf eine bestimmte Zahl fest. Zum Beispiel:
Beispiel 1
HTML
<div id="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
CSS
#col {
column-count: 2;
}
Ergebnis
Der Inhalt wird in zwei Spalten angezeigt:
Die Eigenschaft column-width legt die gewünschte Mindestbreite einer Spalte fest. Wenn column-count nicht ebenfalls festgelegt ist, erstellt der Browser automatisch so viele Spalten, wie in die verfügbare Breite passen.
Beispiel 2
HTML
<div id="wid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#wid {
column-width: 100px;
}
Ergebnis
In einem Multi-Column-Block fließt der Inhalt bei Bedarf automatisch von einer Spalte in die nächste. Alle HTML-, CSS- und DOM-Funktionen werden innerhalb von Spalten unterstützt, ebenso wie Bearbeitung und Drucken.
Das Spalten-Kurzform
Sie können entweder column-count oder column-width verwenden. Da sich die Werte für diese Eigenschaften nicht überschneiden, ist es oft bequem, die Kurzform columns zu nutzen.
Beispiel 3
In diesem Beispiel wird die CSS-Deklaration column-width: 12em durch columns: 12em ersetzt.
HTML
<div id="col_short">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#col_short {
columns: 12em;
}
Beispiel 4
In diesem Beispiel wird die CSS-Deklaration column-count: 4 durch columns: 4 ersetzt.
HTML
<div id="columns_4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#columns_4 {
columns: 4;
}
Ergebnis
Beispiel 5
Die beiden CSS-Deklarationen column-width: 8em und column-count: 12 können durch columns: 12 8em ersetzt werden. Der column-count-Teil der Kurzform ist die maximale Anzahl von Spalten, die vorhanden sein werden. Die column-width ist die Mindestbreite, die jede Spalte haben sollte.
HTML
<div id="columns_12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#columns_12 {
columns: 12 8em;
}
Ergebnis
Angenommen, es gibt einen Standardabstand von 1em zwischen den Spalten, dann wird es 12 Spalten mit einer Breite von jeweils 8em oder mehr geben, wenn das Container breiter ist als 103ems (12 Spalten * 8em Breite + 7 1em Abstände). Wenn das Container schmaler als 103ems ist, wird es weniger als 12 Spalten geben. Wenn der Container weniger als 17ems breit ist (8em Spalte + 8em Spalte + 1em Abstand), wird der Inhalt als eine einzelne Spalte ohne Spaltenabstand dargestellt.
Höhenbalancierung
CSS-Spalten erfordern, dass die Spaltenhöhen ausgeglichen werden: das heißt, der Browser stellt die maximale Spaltenhöhe so ein, dass die Höhen des Inhalts in jeder Spalte ungefähr gleich sind. Firefox macht dies.
In einigen Situationen ist es jedoch auch nützlich, die maximale Höhe der Spalten explizit festzusetzen und den Inhalt beginnend mit der ersten Spalte und so viele Spalten wie nötig zu erstellen, eventuell überlaufend nach rechts. Wenn die Höhe eingeschränkt ist, indem die CSS-Eigenschaften height oder max-height auf einem Multi-Column-Block festgelegt werden, darf jede Spalte bis zu dieser Höhe wachsen und nicht weiter, bevor eine neue Spalte hinzugefügt wird. Dieser Modus ist auch viel effizienter für das Layout.
Spaltenabstände
Zwischen den Spalten gibt es einen Abstand. Der empfohlene Standardwert ist 1em. Diese Größe kann geändert werden, indem die Eigenschaft column-gap auf den Multi-Column-Block angewendet wird:
Beispiel 6
HTML
<div id="column_gap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#column_gap {
column-count: 5;
column-gap: 2em;
}
Ergebnis
Schlussfolgerung
CSS-Spalten sind ein Layout-Grundelement, das helfen kann, große Textblöcke leichter lesbar zu machen, wenn responsiver Inhalt auf breiten Ansichtsfenstern betrachtet wird. Kreative Entwickler können viele Verwendungen dafür finden, insbesondere in Verbindung mit Container-Queries und der automatischen Höhenbalancierungsfunktion.