Proprietà CSS grid-template

Definizione e uso

La proprietà grid-template è un'abbreviazione delle seguenti proprietà:

Vedi anche:

Tutorial CSS:Progetto di griglia CSS

Manuale di riferimento CSS:Proprietà grid-area

Manuale di riferimento CSS:Proprietà grid-template-rows

Manuale di riferimento CSS:Proprietà grid-template-columns

Manuale di riferimento CSS:Proprietà grid-template-areas

Esempio

Esempio 1

Creare una griglia a tre colonne con altezza di 150 pixel per la prima colonna:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Prova tu stesso

Esempio 2

Definisce due righe, tra cui "item1" attraversa le prime due colonne delle prime due righe (in una disposizione a cinque colonne):

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

Prova tu stesso

Esempio 3

Nomi tutti i progetti e crea un template 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:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Prova tu stesso

Sintassi CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Valore dell'attributo
Valore Descrizione
none Valore predefinito. Non definisce le dimensioni delle colonne o delle righe.
grid-template-rows / grid-template-columns Definisce le dimensioni delle colonne e delle righe.
grid-template-areas Definisce l'uso della disposizione a griglia tramite progetti nominali.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Incorpora questa proprietà dall'elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: none none none
Ereditarietà: No
Produzione di animazione: Supportato. Vedi:Proprietà correlate all'animazione.
Versione: Modulo Layout di Griglia CSS Livello 1
Sintassi JavaScript: object.style.gridTemplate = "250px / auto auto"

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