CSS grid-template-areas Proprietà
Esempio
Fai in modo che l'elemento denominato "myArea" si estenda su due colonne in un layout a griglia di cinque colonne:
.item1 {
grid-area:
myArea;
}
.grid-container {
display: grid;
grid-template-areas:
"myArea myArea . . .";
}
Definizione e utilizzo
La grid-template-areasproprietà specifica le aree all'interno del layout della griglia.
È possibile assegnare un nome agli elementi della griglia utilizzando la proprietà grid-area
e quindi fare riferimento al nome nella grid-template-areas
proprietà.
Ogni area è definita da apostrofi. Utilizzare un punto per fare riferimento a un elemento della griglia senza nome.
| Valore di default: | nessuno |
|---|---|
| Ereditato: | no |
| Animabile: | sì. Leggi su animabile |
| Versione: | Modulo layout griglia CSS Livello 1 |
| sintassi JavaScript: | oggetto .style.gridTemplateAreas=". . . myArea myArea" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| grid-template-areas | 57 | 16 | 52 | 10 | 44 |
Sintassi CSS
grid-template-areas: none|itemnames;
Valori di proprietà
| Value | Description | Play it |
|---|---|---|
| none | Default value. No named grid areas | |
| itemnames | A sequence that specifies how each columns and row should display |
Altri esempi
Esempio
Specificare due righe, dove "item1" si estende sulle prime due colonne nelle prime due righe (in un layout a griglia a cinque colonne):
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
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 {
display: grid;
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: elemento griglia CSS
Riferimento CSS: la proprietà dell'area della griglia
Riferimento CSS: la proprietà del modello di griglia