CSS grid-template egenskab

Definition og brug

grid-template-egenskab er en forkortelse for følgende egenskaber:

Læs også:

CSS Læringsguide:CSS netværksprojekt

CSS Referencemanual:grid-area-egenskab

CSS Referencemanual:grid-template-rows-egenskab

CSS Referencemanual:grid-template-columns-egenskab

CSS Referencemanual:grid-template-areas-egenskab

Eksempel

Eksempel 1

Opret et trekolonnerigt grid-layout med en højde på 150 pixels for det første kolonne:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Prøv det selv

Eksempel 2

Definerer to rader, hvor "item1" krysser de to første kolonnene i de to første radene (i et fem-kolonne-rutenett):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea ...'
    'myArea myArea ...';
}

Prøv det selv

Eksempel 3

Navngi alle elementer, og lagg deretter til et ferdig webbskjema:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: hoved; }
.item4 { grid-area: høyre; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu hoved hoved hoved hoved høyre'
    'menu footer footer footer footer';
}

Prøv det selv

CSS-syntaks

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Egenskapsverdi
Verdi Beskrivelse
none Standardverdi. Definerer ikke størrelsen på kolonner eller rader.
grid-template-rows / grid-template-columns Definerer størrelsen på kolonner og rader.
grid-template-areas Definerer bruk av navngitte prosjekter for rutenettlegging.
initial Sett denne egenskapen til standardverdien. Se: initial.
inherit Arv denne egenskapen fra foreldrelementet. Se: inherit.

Teknisk detalj

Standardverdi: none none none
Arv: Nei
Animasjonsproduksjon: Støttet. Se:Animasjonsrelaterte egenskaper.
Versjon: CSS Grid Layout Module Level 1
JavaScript-syntaks: object.style.gridTemplate = "250px / auto auto"

Nettleserstøtte

Tabellen viser det første nettleser som fullt ut støtter egenskapen.

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