columns

Übersicht

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

Syntax

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

Werte

<column-width>

Ist ein <length> Wert, der einen Hinweis auf die optimale Breite einer Spalte angibt. Die tatsächliche Spaltenbreite kann größer sein (um den verfügbaren Platz auszufüllen) oder kleiner sein (nur wenn der verfügbare Platz kleiner ist als die angegebene Spaltenbreite). Die Länge muss positiv sein, ansonsten ist die Angabe ungültig.

<column-count>

Ist ein positiver <integer> Wert, der die ideale Anzahl an Spalten angibt, in die der Inhalt des Elements aufgeteilt wird. Falls die column-width auch auf einen nicht-auto Wert gesetzt ist, gibt dieser Wert lediglich die maximal erlaubte Anzahl an Spalten an.

Beispiel

HTML

<p class="content-box">
  Dies ist ein kleiner Text mit der `columns` Eigenschaft. Der Text wird gleichmässig auf drei Spalten verteilt.
</p>

CSS

.content-box {
  columns: 3 auto;
}

Result

Spezifikation

Browser Kompatibilität