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.

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

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

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

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
columnsChrome Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung 50
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 52
Vollständige Unterstützung 52
Vollständige Unterstützung 9
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise Prior to version 37, multiple columns didn't work with display: table-caption elements.
IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 11.1
Vollständige Unterstützung 11.1
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung 2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 50Firefox Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
Vollständige Unterstützung 22
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise Prior to version 37, multiple columns didn't work with display: table-caption elements.
Opera Android Vollständige Unterstützung 11.1
Vollständige Unterstützung 11.1
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 3.2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 5.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.