CSS grid-area egenskap

Definition och användning

grid-area-egenskapen definierar storleken på nätverksobjektet och dess plats i nätverksläggningen, och är en förkortning av följande egenskaper:

grid-area-egenskapen kan också användas för att tilldela namn till nätverksobjekt. Därefter kan namnen användas via nätverkskärlens grid-template-areas Använd attribut för att namnge nätverksobjekt. Se exempel nedan.

Se också:

CSS-handbok:CSS-grid-läggning

Exempel

Exempel 1

Låt "item1" börja på rad 2 kolonn 1 och sträcka sig över 2 rader och 3 kolumner:

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

Prova själv

Tips:Mer exempel finns på sidans botten.

CSS-syntaks

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

Egenskapsvärde

Värde Beskrivning
grid-row-start Bestäm från vilket rad som objektet ska visas.
grid-column-start Bestäm från vilket kolonn som objektet ska visas.
grid-row-end Reglerar var projektet stoppar att visas vid vilken radlinje, eller hur många rader det sträcker sig över.
grid-column-end Ange var projektet stoppar att visas vid vilken kolonnlinje, eller hur många kolumner det sträcker sig över.
itemname Reglerar projektet för nätverksobjektet.

Tekniska detaljer

Standardvärde: auto / auto / auto / auto
Ärvning: Nej
Animeringsproduktion: Stöd. Se till:Animeringsrelaterade egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridArea="1 / 2 / span 2 / span 3"

Mer exempel

Exempel 2

Item1 är namngiven "myArea" och sträcker sig över alla fem kolumner i ett rutnät med fem kolumner:

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

Prova själv

Exempel 3

Låt "myArea" sträcka sig över två kolumner i ett femkolumns rutnät (punktindikator betyder att det finns inga namngivna objekt):

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

Prova själv

Exempel 4

Gör "item1" att sträcka sig över två kolumner och två rader:

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

Prova själv

Exempel 5

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

Prova själv

Webbläsarstöd

Tabellens numrer anger den första webbläsareversion som helt stöder detta egenskap.

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