Proprietà dell'area della griglia CSS
Esempio
Fai in modo che "item1" inizi sulla riga 2 colonna 1 e si estenda su 2 righe e 3 colonne:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La grid-areaproprietà specifica la dimensione e la posizione di un elemento della griglia in un layout della griglia ed è una proprietà abbreviata per le seguenti proprietà:
La grid-areaproprietà può essere utilizzata anche per assegnare un nome a un elemento della griglia. Gli elementi della griglia con nome possono quindi essere referenziati dalla
proprietà grid-template-areas del contenitore della griglia. Vedere gli esempi di seguito.
| Valore di default: | auto/auto/auto/auto |
|---|---|
| Ereditato: | no |
| Animabile: | sì. Leggi su animabile |
| Versione: | Modulo layout griglia CSS Livello 1 |
| sintassi JavaScript: | oggetto .style.gridArea="1 / 2 / span 2 / span 3" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| grid-area | 57 | 16 | 52 | 10 | 44 |
Sintassi CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Valori di proprietà
| 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 |
Altri esempi
Esempio
Item1 ottiene il nome "myArea" e si estende su tutte e cinque le colonne in un layout a griglia di cinque colonne:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Esempio
Lascia che "myArea" si estenda su due colonne in un layout a griglia di cinque colonne (i segni di punto rappresentano elementi senza nome):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Esempio
Fai in modo che "item1" si estenda su due colonne e due righe:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
Esempio
Assegna un nome a tutti gli elementi e crea un modello di pagina Web pronto per l'uso:
.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';
}
Pagine correlate
Tutorial CSS: layout della griglia CSS