columns

Die CSS Eigenschaft columns ist eine Kurzform Eigenschaft, die es erlaubt, sowohl die column-width als auch die column-count Eigenschaft auf einmal zu setzen.

Syntax

/* Column width */
columns: 18em;

/* Column count */
columns: auto;
columns: 2;

/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: unset;

Die Eigenschaft columns kann mit einem oder mit zwei von den unten aufgelisteten Werten in beliebiger Reihenfolge spezifiziert.

Werte

<column-width>
The ideal column width, defined as a <length> or the keyword auto. The actual width may be wider or narrower to fit the available space. See column-width.
<column-count>
The ideal number of columns into which the element's content should be flowed, defined as an <integer> or the keyword auto. If neither this value nor the column's width are auto, it merely indicates the maximum allowable number of columns. See column-count.

Formale Definition

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufBlockcontainer außer Tabellen umgebende Boxen
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

<'column-width'> || <'column-count'>

Beispiel

Sets drei gleiche Spalten

HTML

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

CSS

.content-box {
  columns: 3 auto;
}

Ergebnis

Spezifikation

Spezifikation Status Kommentar
CSS Multi-column Layout Module
Die Definition von 'columns' in dieser Spezifikation.
Arbeitsentwurf Ursprüngliche Definition

Browser Kompatibilität

BCD tables only load in the browser

Siehe auch