column-count

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Die column-count CSS Eigenschaft teilt den Inhalt eines Elements in die angegebene Anzahl von Spalten auf.

Probieren Sie es aus

Syntax

css

/* Keyword value */
column-count: auto;

/* <integer> value */
column-count: 3;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;

Werte

auto: Die Anzahl der Spalten wird durch andere CSS-Eigenschaften bestimmt, wie z.B. column-width.
<integer>: Ist ein strikt positiver <integer>, der die ideale Anzahl von Spalten beschreibt, in die der Inhalt des Elements geflossen wird. Wenn die column-width ebenfalls auf einen anderen Wert als auto gesetzt ist, zeigt sie lediglich die maximal zulässige Anzahl von Spalten an.

Formale Definition

Initialer Wert	`auto`
Anwendbar auf	Blockcontainer außer Tabellen umgebende Boxen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Integer

Formale Syntax

column-count = 
  auto             |
  <integer [1,∞]>

Beispiele

Einen Absatz auf drei Spalten aufteilen

HTML

html

<p class="content-box">
  This is a bunch of text split into three columns using the CSS
  <code>column-count</code>
  property. The text is equally distributed over the columns.
</p>

CSS

css

.content-box {
  column-count: 3;
}

Ergebnis

Spezifikationen

Specification
CSS Multi-column Layout Module Level 1 # cc

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

column-width, columns Kurznotation
column-rule-color, column-rule-style, column-rule-width, column-rule Kurznotation
Mehrspalten-Layout (Layout lernen)
Grundlegende Konzepte von Multicol