CSS grid-område egenskab

Definition og brug

grid-area egenskaben gitterelementernes dimensioner samt deres placering i gitterlayoutet, det er en forkortelse af følgende egenskaber:

grid-area egenskaben kan også bruges til at tildele navne til gitterelementer. Derefter kan det gennem grid-containere grid-template-areas Egenskaber refererer til navngivne gitterelementer. Se nedenstående eksempel.

Se også:

CSS Læringskursus:CSS Gitterlayout

Eksempel

Eksempel 1

Lad "item1" begynde på række 2 kolonne 1 og krydse to rækker tre kolonner:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Prøv det selv

Vedligeholdelse:Flere eksempler findes på siden i bunden.

CSS syntaks

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Attributværdi

Værdi Beskrivelse
grid-row-start Afgør fra hvilken række elementerne skal vises.
grid-column-start Afgør fra hvilken kolonne elementerne skal vises.
grid-row-end Regulerer hvor projektet stopper at blive vist på en bestemt rækkekant, eller hvor mange rækker det strækker sig over.
grid-column-end Angiver hvor projektet stopper at blive vist på en bestemt kolonnekant, eller hvor mange kolonner det strækker sig over.
itemname Regulerer projektet i rutenettet.

Tekniske detaljer

Standardværdi: auto / auto / auto / auto
Arv: Nej
Animationproduktion: Understøttet. Se:Animation-relaterede egenskaber.
Version: CSS Grid Layout Module Level 1
JavaScript-syntaks: object.style.gridArea="1 / 2 / span 2 / span 3"

Flere eksempler

Eksempel 2

Item1 er navngivet "myArea" og strækker sig over alle fem kolonner i et fem-kolonne-gitterlayout:

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

Prøv det selv

Eksempel 3

Gør "myArea" til at strække sig over to kolonner i et fem-kolonne-gitterlayout (punktmærker betyder ingen navngivne elementer):

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

Prøv det selv

Eksempel 4

Gør "item1" til at strække sig over to kolonner og to rækker:

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

Prøv det selv

Eksempel 5

Navngiv alle elementer og lav et færdigt webstempelmønster:

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

Prøv det selv

Browserstøtte

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

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