CSS grid-template eigenschap

Definitie en gebruik

Het grid-template eigenschap is een afkorting van de volgende eigenschappen:

Zie ook:

CSS handleiding:CSS rasterproject

CSS referentiemanual:Het grid-area eigenschap

CSS referentiemanual:Het grid-template-rows eigenschap

CSS referentiemanual:Het grid-template-columns eigenschap

CSS referentiemanual:Het grid-template-areas eigenschap

Voorbeeld

Voorbeeld 1

Maak een driekolommen gridlayout met een hoogte van 150 pixels voor de eerste kolom:

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

Probeer het zelf

Voorbeeld 2

Bepaalt twee rijen, waarbij "item1" de eerste twee kolommen van de eerste twee rijen overspant (in een vijfkolomrasterlayout):

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

Probeer het zelf

Voorbeeld 3

Benoem alle items en maak een voorafgemaakt webpaginamembraak:

.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';
}

Probeer het zelf

CSS syntax

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Eigenschapswaarde
Waarde Beschrijving
none Standaardwaarde. Bepaalt geen afmetingen van kolommen of rijen.
grid-template-rows / grid-template-columns Bepaalt de afmetingen van de kolommen en rijen.
grid-template-areas Bepaalt het rasterlayout met genaamd projecten te gebruiken.
initial Deze eigenschap instellen op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap erven van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: none none none
Inheritance: nee
Animatieproductie: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplate = "250px / auto auto"

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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