CSS grid-auto-columns egenskap

Definition och användning

grid-auto-columns-attributet ställer in storleken på kolumnerna i nätverksbehållaren.

Denna egenskap påverkar bara kolumner som inte har ställts in i storlek.

Se också:

CSS-tutorial:CSS-gridlayout

CSS-referenshandbok:grid-auto-rows-attribut

Exempel

Ställ in standardstorlek för kolumnerna i nätverket:

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

Prova själv

CSS-syntax:

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

Egenskapsvärde

Värde Beskrivning
auto Standardvärde. Kolumnstorleken bestäms av behållarens storlek.
fit-content()
max-content Ställ in varje kolumns storlek baserat på den största posten i kolumnen.
min-content Ställ in varje kolumns storlek baserat på den minsta posten i kolumnen.
minmax(min.max) Ställ in storleksintervallet mellan min och max. Formulär: minmax(min.max)
length Ställ in kolumnstorlek genom att använda giltiga längdvärden. Se vidareLängdenheter.
% Ställ in kolumnstorlek genom att använda procentvärden.

Tekniska detaljer

Standardvärde: auto
Arv: Nej
Animationstillverkning: Stöd. Se vidare:Animationsrelaterade egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridAutoColumns="120px"

Webbläsarstöd

Talen i tabellen anger den första webbläsarversion som fullständigt stöder egenskapen.

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