CSS grid-template-areas eigenschap

Definitie en gebruik

Het grid-template-areas-eigenschap bepaalt de regio's in het grid-lay-out.

U kunt gebruiken grid-area Benaming van de grid-item projecteren, vervolgens verwijzen naar deze naam in het grid-template-areas-eigenschap.

Elke regio wordt gedefinieerd door een apostrof. Gebruik een punt om onbenoemde griditems te citeren.

Zie ook:

CSS handleiding:CSS grid-item

CSS referentiemanual:grid-area eigenschap

CSS referentiemanual:grid-template eigenschap

Voorbeeld

Voorbeeld 1

Maakt het project "myArea" in een vijfkolom grid over twee kolommen lopen:

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

Probeer het zelf uit

Voorbeeld 2

Definieert twee rijen, waarbij "item1" in de eerste twee rijen over de eerste twee kolommen loopt (in een vijfkolom grid):

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

Probeer het zelf uit

Voorbeeld 3

Naam alle items en maak een voorafgemaakt webpagina sjabloon:

.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-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Probeer het zelf uit

CSS syntaxis

grid-template-areas: none|itemnames;

Eigenschapswaarde

Waarde Beschrijving
none Standaardwaarde. Onbenoemde gridgebieden (grid areas).
itemnames Definieert de volgorde waarin elke kolom en elke rij moet worden weergegeven.

Technische details

Standaardwaarde: none
Inheritance: Nee
Animatieproductie: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript syntaxis: object.style.gridTemplateAreas=". . . myArea myArea"

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