CSS grid-template-columns egenskab

Definisjon og bruk

grid-template-columns eigenskapen definerer antall kolonner (og bredde) i rutenett layout.

Disse verdiene er en liste av verdier adskilt av mellomrom, hvor hver verdi spesifiserer størrelsen på tilsvarende kolonne.

Se også:

CSS veiledning:CSS rutenett

CSS referansehåndbok:grid-template-rows eigenskap

CSS referansehåndbok:grid-template eigenskap

Eksempel

Eksempel 1

Lag en firekolonnen rutenett kontainer:

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

Prøv det selv

Eksempel 2

Lag en firekolonners rutenett layout og spesifiser størrelsen på hver kolonne:

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

Prøv det selv

CSS-syntaks

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

Egenskapsverdi

Verdi Beskrivelse
none Standardverdi. Opprett kolonner når nødvendig.
auto Kolonnens størrelse avhenger av kontainerens størrelse og størrelsen på elementinnholdet i kolonnen.
max-content Sett kolonnens størrelse basert på det største elementet i kolonnen.
min-content Sett kolonnens størrelse basert på den minste elementet i kolonnen.
length Sett kolonnens størrelse ved å bruke gyldige lengdeverdier. Se ogsåLengdeenheter.
initial Sett denne egenskapen til standardverdien. Se også initial.
inherit Arv denne egenskapen fra foreldrelementet. Se også inherit.

Teknisk detalj

Standardverdi: none
Arv: Nei
Animasjonsproduksjon: Støttet. Se også:Animasjonsrelaterte egenskaper.
Versjon: CSS Grid Layout Module Level 1
JavaScript-syntaks: object.style.gridTemplateColumns="50px 50px 50px"

Nettleserstøtte

Tallene i tabellen angiver den første nettleseren som fullt ut støtter egenskapen.

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