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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-count
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch