CSS columns-Eigenschaft
Die CSS-Eigenschaft columns legt Breite und Anzahl der Spalten fest. Werte und Beispiele werden vorgestellt.
Die CSS-Eigenschaft columns ist eine Kurzschreibweise, die den Inhalt eines einzelnen Elements in mehrere Spalten fließen lässt – ähnlich wie bei einer Zeitung. Sie setzt gleichzeitig zwei Langschreibweisen:
column-count— die maximale Anzahl der Spalten.column-width— die minimale Breite jeder Spalte (ein Richtwert, keine feste Vorgabe).
Statt zwei Zeilen zu schreiben:
.example {
column-width: 100px;
column-count: 3;
}schreibt man eine:
.example {
columns: 100px 3;
}Die beiden Werte dürfen in beliebiger Reihenfolge angegeben werden, da einer eine Länge und der andere eine Ganzzahl ist – der Browser kann sie daher voneinander unterscheiden. Es ist auch möglich, nur einen der beiden Werte anzugeben und den anderen auf auto zu belassen.
Warum columns verwenden?
Das Mehrspalten-Layout eignet sich ideal für längere Texte – Artikel, Definitionen, Tag-Wolken –, bei denen die Lesezeilen kürzer sein sollen. Im Gegensatz zu Flexbox oder CSS Grid wird das Markup nicht in separate Boxen aufgeteilt; der Browser verteilt einen Inhaltsblock auf die Spalten und ordnet ihn neu an, wenn sich der Container ändert.
Wie die beiden Werte zusammenwirken
Die Werte beschreiben ein Ziel, und der Browser wählt die beste Lösung:
column-widthwird als Mindestwert behandelt. Der Browser packt so viele Spalten mit mindestens dieser Breite in den Container, wie möglich.column-countbegrenzt diese Anzahl. Der Browser erstellt nie mehr Spalten als angegeben, auch wenn mehr passen würden.
columns: 100px 3 bedeutet also: „Spalten mindestens 100px breit, aber höchstens 3 davon." In einem breiten Container entstehen 3 Spalten; wird der Container schmaler, sinkt die Anzahl auf 2, dann auf 1, wobei jede Spalte ≥ 100px bleibt. Das macht das Layout ohne Media Queries responsiv.
Wenn die gewünschte Breite und Anzahl nicht gleichzeitig in das Element passen, bevorzugt der Browser die Breite und reduziert die Spaltenanzahl entsprechend.
Die Eigenschaft columns gehört zu den CSS3-Eigenschaften. Um Abstände und Trennlinien zwischen den Spalten festzulegen, kombiniert man sie mit column-gap und column-rule; um eine Überschrift über alle Spalten zu spannen, verwendet man column-span.
| Initial Value | auto auto |
|---|---|
| Applies to | Block containers except table wrapper boxes. |
| Inherited | No. |
| Animatable | Yes. Only column-width is animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.columns = "100px 2"; |
Syntax
Syntax der CSS columns-Eigenschaft
columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;Beispiel der columns-Eigenschaft:
Beispiel der CSS columns-Eigenschaft mit column-width und column-count
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 100px 3;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Ergebnis
Im nächsten Beispiel ist jede Spalte mindestens 50px breit und die Spaltenanzahl ist auf 5 begrenzt. Da die Spalten schmal sind, kann der Browser in einem breiten Container bis zu 5 davon unterbringen – und weniger, wenn er schmaler wird:
Beispiel mit kleinerer Breite und höherem Spaltenlimit
Beispiel der CSS columns-Eigenschaft mit column-width und column-count als Werte
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 50px 5;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
auto | Sowohl column-width als auch column-count werden auf auto gesetzt. Das ist der Standardwert. |
<length> | Legt die Mindestbreite der Spalten fest. |
<integer> | Legt die maximale Anzahl der Spalten fest. |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Häufige Fallstricke
- Es ist ein Richtwert, kein Befehl.
column-widthist ein Mindestwert, daher ist die tatsächlich gerenderte Breite fast immer größer als der angegebene Wert. Um eine exakte Breite festzulegen, muss auch die Containergröße kontrolliert werden. - Spalten werden ausgeglichen, nicht von oben nach unten gefüllt. Standardmäßig versucht der Browser, alle Spalten annähernd gleich hoch zu machen, anstatt die erste vollständig zu füllen, bevor die nächste beginnt.
- Auf Umbrüche achten. Lange Wörter oder nicht umbruchfähige Elemente können in einer schmalen Spalte überlaufen;
break-inside: avoidhilft, Elemente wie Karten zusammenzuhalten. - Nur
column-widthist animierbar. Die Spaltenanzahl springt zwischen Ganzzahlen, daher sind Übergänge nicht fließend.