CSS grid-auto-kolommen eigenschap

Definitie en gebruik

De grid-auto-columns-eigenschap stelt de afmetingen van de kolommen in de rastercontainer in.

Deze eigenschap beïnvloedt alleen de kolommen die geen afmetingen hebben ingesteld.

Zie ook:

CSS handleiding:CSS rasterontwerp

CSS referentiemanual:grid-auto-rows-eigenschap

Voorbeeld

Stel de standaardafmetingen van de kolommen in voor het raster:

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

Probeer het zelf uit

CSS-syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
auto Standaardwaarde. De afmetingen van de kolommen worden bepaald door de afmetingen van de container.
fit-content()
max-content Stel de afmetingen van elke kolom in op basis van het grootste item in de kolom.
min-content Stel de afmetingen van elke kolom in op basis van de kleinste item in de kolom.
minmax(min.max) Stel een afmetingsbereik in dat groter dan of gelijk aan min en kleiner dan of gelijk aan max.
length Stel de afmetingen van de kolommen in door gebruik te maken van legitieme lengtewaarden. RaadpleegLengte-eenheid.
% Stel de afmetingen van de kolommen in door gebruik te maken van percentage waarden.

Technische details

Standaardwaarde: auto
Inheritance: Nee
Animatieproductie: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript-syntaxis: object.style.gridAutoColumns="120px"

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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