CSS columns-Eigenschaft
Die CSS-columns-Eigenschaft ist eine Kurzschreibweise für die folgenden Eigenschaften:
column-count, die die maximale Anzahl der Spalten definiert.column-width, die die minimale Breite der Spalten definiert.
Diese beiden Eigenschaften erstellen gemeinsam ein mehrspaltiges Layout, das sich an die Containerbreite anpasst, wobei die Anzahl der Spalten in der Regel bei weniger Platz reduziert wird.
Die columns-Eigenschaft ist eine der CSS3-Eigenschaften.
Das Festlegen von sowohl column-count als auch column-width ist nicht immer sinnvoll, da es die Flexibilität und Anpassungsfähigkeit des Layouts einschränken kann.
INFO
Wenn die Breite und Anzahl der Spalten nicht in die Breite des Elements passen, reduziert der Browser die Spaltenanzahl automatisch, um die angegebenen Spaltenbreiten anzupassen.
| Anfangswert | auto auto |
|---|---|
| Gilt für | Block-Container außer Tabellen-Wrapper-Boxen. |
| Vererbbar | Nein. |
| Animierbar | Ja. Nur column-width ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.columns = "100px 2"; |
Syntax
Syntax der CSS columns-Eigenschaft
columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;Beispiel für die columns-Eigenschaft:
Beispiel der CSS columns-Eigenschaft mit den Eigenschaften 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 wird die minimale Breite für jede Spalte auf 50px und die maximale Anzahl der Spalten auf 5 festgelegt:
Beispiel der columns-Eigenschaft mit angegebener Breite und Anzahl der Spalten:
Beispiel der CSS columns-Eigenschaft mit den Eigenschaften column-width und column-count als Wert
<!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. Dies ist der Standardwert. |
<length> | Legt die minimale Breite für Spalten fest. |
<integer> | Legt die maximale Anzahl der Spalten fest. |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Eigenschaften werden verwendet, um mehrspaltige Layouts in CSS zu erstellen?