CSS grid-auto-columns Eigenschaft

Definition und Verwendung

Die grid-auto-columns-Eigenschaft stellt die Größe der Spalten im Grid-Container ein.

Diese Eigenschaft beeinflusst nur Spalten, deren Größe nicht festgelegt wurde.

Weitere Informationen siehe:

CSS-Tutorial:CSS-Grid-Layout

CSS-Referenzhandbuch:grid-auto-rows-Eigenschaft

Beispiel

Standardgröße für die Spalten im Gitter festlegen:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

Probieren Sie es selbst aus

CSS-Syntax

grid-auto-columns: auto|max-content|min-content|length;

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Die Größe der Spalten wird durch die Größen des Containers bestimmt.
fit-content()
max-content Die Größe jeder Spalte basierend auf dem größten Element in der Spalte einstellen.
min-content Die Größe jeder Spalte basierend auf dem kleinsten Element in der Spalte einstellen.
minmax(min.max) Ein Größenbereich von größer oder gleich min bis kleiner oder gleich max einstellen.
length Die Größe der Spalten einstellen, indem man gültige Längenwerte verwenden. SieheLängenmaßeinheit.
% Die Größe der Spalten einstellen, indem man prozentuale Werte verwenden.

Technische Details

Standardwert: auto
Vererbung: Nein
Animationsproduktion: Unterstützt. Siehe:Animationsbezogene Eigenschaften.
Version: CSS Grid Layout Modul Level 1
JavaScript-Syntax: object.style.gridAutoColumns="120px"

Browser-Unterstützung

Die Zahlen in der Tabelle kennzeichnen die erste Browser-Version, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44