CSS grid-template egenskap

Definition och användning

grid-template egenskapen är en förkortning av följande egenskaper:

Se också:

CSS教程：CSS nätprojekt

CSS Referenshandbok:grid-area egenskapen

CSS Referenshandbok:grid-template-rows egenskapen

CSS Referenshandbok:grid-template-columns egenskapen

CSS Referenshandbok:grid-template-areas egenskapen

Exempel

Exempel 1

Skapa en trekolumns layout med en första kolumn på 150 pixlar hög:

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

Prova själv

Exempel 2

Bestäm två rader, där "item1" täcker de två första raderna i de två första kolumnerna (i en femkolumns layout):

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

Prova själv

Exempel 3

Namnge alla objekt och skapa ett färdigt webbplatsmönster:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Prova själv

CSS-syntax

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Egenskapsvärde
Värde Beskrivning
none Standardvärde. Reglerar inte storleken på kolumner eller rader.
grid-template-rows / grid-template-columns Reglerar storleken på kolumner och rader.
grid-template-areas Reglerar användning av namngivna projekt för nätverkslayout.
initial Sätt denna egenskap till dess standardvärde. Se till: initial.
inherit Följ från föräldrelementet för att arbeta med denna egenskap. Se till: inherit.

Tekniska detaljer

Standardvärde: none none none
Arv: Nej
Animaationsproduktion: Stöd. Se till:Animaationsrelaterade egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridTemplate = "250px / auto auto"

Webbläsarstöd

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

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