columns
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 columns
CSS Kurzschreibweise legt die Anzahl der Spalten fest, die bei der Darstellung des Inhalts eines Elements verwendet werden, sowie die Breiten dieser Spalten.
Probieren Sie es aus
Bestandteile der Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
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: revert;
columns: revert-layer;
columns: unset;
Die columns
-Eigenschaft kann mit einem oder zwei der unten aufgeführten Werte in beliebiger Reihenfolge angegeben werden.
Werte
<'column-width'>
-
Die ideale Spaltenbreite, definiert als ein
<length>
oder das Schlüsselwortauto
. Die tatsächliche Breite kann größer oder kleiner sein, um in den verfügbaren Raum zu passen. Siehecolumn-width
. <'column-count'>
-
Die ideale Anzahl von Spalten, in die der Inhalt des Elements fließen soll, definiert als ein
<integer>
oder das Schlüsselwortauto
. Wenn weder dieser Wert noch die Breite der Spaltenauto
sind, wird lediglich die maximal zulässige Anzahl von Spalten angegeben. Siehecolumn-count
.
Formale Definition
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Blockcontainer außer Tabellen umgebende Boxen |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
columns =
<'column-width'> ||
<'column-count'>
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<length-percentage> =
<length> |
<percentage>
Beispiele
Drei gleiche Spalten festlegen
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
Spezifikationen
Specification |
---|
CSS Multi-column Layout Module Level 1 # columns |
Browser-Kompatibilität
BCD tables only load in the browser