Eigenschap CSS - rastergebied
Voorbeeld
Laat "item1" beginnen op rij 2 kolom 1, en overspan 2 rijen en 3 kolommen:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De grid-area
eigenschap specificeert de grootte en locatie van een rasteritem in een rasterlay-out en is een verkorte eigenschap voor de volgende eigenschappen:
De grid-area
eigenschap kan ook worden gebruikt om een naam aan een rasteritem toe te kennen. Er kan vervolgens naar benoemde rasteritems worden verwezen door de
eigenschap rastersjabloongebieden van de rastercontainer. Zie voorbeelden hieronder.
Standaardwaarde: | auto / auto / auto / auto |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS-rasterlay-outmodule niveau 1 |
JavaScript-syntaxis: | object .style.gridArea="1 / 2 / span 2 / span 3" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
CSS-syntaxis
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Eigendomswaarden
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
Meer voorbeelden
Voorbeeld
Item1 krijgt de naam "myArea" en beslaat alle vijf kolommen in een rasterlay-out met vijf kolommen:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Voorbeeld
Laat "myArea" twee kolommen beslaan in een rasterlay-out met vijf kolommen (punttekens vertegenwoordigen items zonder naam):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Voorbeeld
Zorg ervoor dat "item1" twee kolommen en twee rijen omvat:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
Voorbeeld
Geef alle items een naam en maak een kant-en-klaar webpaginasjabloon:
.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';
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-rasterlay-out