CSS grid-template-areas egenskab

Definisjon og bruk

grid-template-areas-egenskapen definerer områder i rutenettlayout.

Du kan bruke grid-area Navngiv rutenettprosjektet, og referer til navnet i grid-template-areas-egenskapen.

Hver zone defineres af et apostrof. Brug punktum til at citere navnløse netværksprojekter.

Se også:

CSS tutorial:CSS Gitterprojekt

CSS referencemanual:grid-area egenskab

CSS referencemanual:grid-template egenskab

Eksempel

Eksempel 1

Missioner for at navngive projektet "myArea" til at krydse to kolonner i et femkolonne netværkslayout:

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

Prøv det selv

Eksempel 2

Bestem to rækker, hvor "item1" krydser de første to kolonner i de første to rækker (i et femkolonne netværkslayout):

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

Prøv det selv

Eksempel 3

Navngiv alle elementer og lav en færdig netværksmønster-side:

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

Prøv det selv

CSS syntaks

grid-template-areas: none|itemnames;

Egenskabsværdi

Værdi Beskrivelse
none Standardværdi. Unavngivne网格区域（grid areas）.
itemnames Bestemmer, hvordan hver kolonne og hver række skal vises i rækkefølge.

Tekniske detaljer

Standardværdi: none
Arv: Nej
Animationproduktion: Understøttet. Se også:Animationsrelaterede egenskaber.
Version: CSS Grid Layout Module Level 1
JavaScript syntaks: object.style.gridTemplateAreas=". . . myArea myArea"

Browserstøtte

Tabellennumre angiver den første browserversion, der fuldt ud understøtter denne egenskab.

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