`column-count` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2017 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Probieren Sie es aus

column-count: 2;

column-count: 3;

column-count: 4;

column-count: auto;
column-width: 8rem;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  width: 100%;
  text-align: left;
}

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

Diese Eigenschaft wird als einzelner Wert aus der folgenden Liste angegeben:

auto: Die Anzahl der Spalten wird durch andere CSS-Eigenschaften bestimmt, beispielsweise column-width.
<integer>: Eine strikt positive <integer>, die die ideale Anzahl von Spalten beschreibt, in die der Inhalt des Elements fließen soll. Wenn column-width ebenfalls auf einen Wert ungleich auto gesetzt ist, gibt sie lediglich die maximal zulässige Anzahl von Spalten an.

Beschreibung

Das Setzen von column-count auf einen Wert größer als 1 erstellt ein mehrspaltiges Layout. Der Inhalt des Elements wird gleichmäßig auf die angegebene Anzahl von Spalten verteilt.

Die Eigenschaft column-count kann zusammen mit den Eigenschaften column-height und column-width auch mithilfe der Kurzschreibweise columns gesetzt werden.

Formale Definition

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

Formale Syntax

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

<integer> = 
  <number-token>

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>