CSS/Eigenschaften/grid-auto-columns

Browserunterstützung
caniuse.com

Die Eigenschaft grid-auto-columns legt Anzahl und Größe von impliziert erzeugten Spalten fest (column track).

Erlaubte Werte

Einen oder mehrere Größenwerte für Spalten, durch Leerstellen getrennt:

• positive Längenangabe oder Prozentwert
• <flex>: Angabe eines nicht-negativen Bruchteils mit der Einheit fr (Fraction: engl. für Bruch)
• max-content Schlüsselwort, das den größten Inhaltsbeitrag des tracks kennzeichnet
• min-content Schlüsselwort, das den geringsten Inhaltsbeitrag des tracks kennzeichnet
• die Funktion minmax(min, max), die Mindest- und Maximalangaben angibt.
• auto, die sich am minimalen Bedarf des vorhandenen Inhalts ausrichtet
• die Funktion fit-content(<länge> | <prozentwert> ] )

Die grid-auto-columns-Werte werden nacheinander für automatisch erzeugte Grid-Spalten verwendet. Wenn der Browser mehr Spalten erstellt, als Werte angegeben sind, beginnt er in der Liste wieder vor vorn.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

• none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

body {
  grid-auto-columns: 1fr 2fr; 
}

Der body wird als Grid dargestellt, dessen Spalten automatisch angelegt werden. Die erste Grid-Spalte ist 1fr breit, die zweite Spalte 2fr. Wird eine dritte Spalte erforderlich, wird sie wieder 1fr breit werden, eine vierte Spalte 2fr, eine fünfte wieder 1fr, und so weiter..

Beachten Sie: Auch ohne Angabe dieser Eigenschaft verteilt sich der vorhandene Inhalt über das Raster, indem er die Zeilen Spalte für Spalte füllt.

Siehe auch

• CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung#Erzeugen von Spalten und Zeilen

Weblinks

• Spezifikation (W3C): grid-auto-columns
• Details: caniuse.com