CSS grid-template-columns egenskap

Definition och användning

grid-template-columns egenskap definierar antalet kolumner (och bredd) i nätlayouten.

Dessa värden är en lista av separerade värden med mellanslag, där varje värde specificerar storleken för motsvarande kolumn.

Se också:

CSS-guide:CSS grid layout

CSS referenshandbok:grid-template-rows egenskap

CSS referenshandbok:grid-template egenskap

Exempel

Exempel 1

Skapa en fyra-kolumns nätbehållare:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Prova själv

Exempel 2

Skapa en fyra-kolumns nätlayout och specificera varje kolumns storlek:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

Prova själv

CSS-syntax

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Egenskapsvärde

Värde Beskrivning
none Standardvärde. Skapa kolumner vid behov.
auto Kolumnens storlek beror på behållarens storlek och storleken på innehållet i kolumnen.
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.
length Ställ in kolumnens storlek genom att använda giltiga längdvärden. Se vidareLängdenheter.
initial Sätt detta egenskap till dess standardvärde. Se vidare initial.
inherit Följ från föräldralementet. Se vidare inherit.

Tekniska detaljer

Standardvärde: none
Arv: Nej
Animation tillverkning: Stöd. Se vidare:Animation relaterade egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridTemplateColumns="50px 50px 50px"

Webbläsarstöd

Talen i tabellen anger den första webbläsarens version som fullständigt stöder detta egenskap.

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