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 eine strikt positive <integer>, die die ideale Anzahl der Spalten beschreibt, in die der Inhalt des Elements aufgeteilt wird. Wenn auch column-width auf einen anderen Wert als auto gesetzt ist, gibt es lediglich die maximal erlaubte Anzahl von Spalten an.

Formale Definition

Anfangswertauto
Anwendbar aufBlockcontainer außer Tabellen umgebende Boxen
VererbtNein
Berechneter Wertwie angegeben
AnimationstypInteger

Formale Syntax

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

Beispiele

Einen Absatz in 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