Proprietà CSS grid-template-areas

Definizione e uso

L'attributo grid-template-areas definisce le aree nella layout a griglia.

Puoi usare grid-area Nomi delle celle di rete, quindi richiamali nell'attributo grid-template-areas.

Ogni area è definita da un apostrofo. Usa il punto per citare gli elementi di griglia senza nome.

Vedi anche:

Tutorial CSS:Progetto di griglia CSS

Manuale CSS:Attributo grid-area

Manuale CSS:Attributo grid-template

Esempio

Esempio 1

Per far sì che l'elemento "myArea" copra due colonne in un layout a cinque colonne:

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

Prova da solo

Esempio 2

Definisce due righe, dove "item1" copre le prime due colonne nelle prime due righe (in un layout a cinque colonne):

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

Prova da solo

Esempio 3

Nomina tutti gli elementi e crea un template di pagina web predefinito:

.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'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Prova da solo

Sintassi CSS

grid-template-areas: none|itemnames;

Valore dell'attributo

Valore Descrizione
none Valore predefinito. Area di griglia non nominata (grid areas).
itemnames Definisce l'ordine in cui le colonne e le righe devono essere visualizzate.

Dettagli tecnici

Valore predefinito: none
Ereditarietà: No
Produzione di animazioni: Supportato. Vedi:Proprietà correlate agli animazioni.
Versione: Modulo di Layout a Griglia CSS Livello 1
Sintassi JavaScript: object.style.gridTemplateAreas=". . . myArea myArea"

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta completamente questa proprietà.

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