Proprietà grid CSS

Definizione e uso

L'attributo grid è una abbreviazione dei seguenti attributi:

Vedi anche:

Guida CSS:Contenitore di griglia CSS

Esempio

Esempio 1

Crea una griglia a tre colonne, con la prima riga alta 150 pixel:

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

Prova da solo

Esempio 2

Definisci due righe, tra cui "item1" attraversa le prime due colonne delle prime due righe (usa una griglia a cinque colonne):

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

Prova da solo

Esempio 3

Nomina tutti gli elementi e crea un template di pagina pronto per l'uso:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: principale; }
.item4 { grid-area: destra; }
.item5 { grid-area: piè di pagina; }
.grid-container {
  display: griglia;
  griglia:
    header header header header header
    'menu principale principale principale destra destra'
    'menu piè di pagina piè di pagina piè di pagina piè di pagina';
}

Prova da solo

Sintassi CSS

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Valore dell'attributo

Valore Descrizione
nessuno Valore predefinito. Non definisce le dimensioni delle righe o delle colonne.
grid-template-rows / grid-template-columns Determina le dimensioni delle colonne e delle righe.
grid-template-areas Determina l'uso di un layout a griglia con nomi di progetto.
grid-template-rows / grid-auto-columns Determina la dimensione delle righe (altezza) e la dimensione automatica delle colonne.
grid-auto-rows / grid-template-columns Determina la dimensione automatica delle righe e imposta la proprietà grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns Determina la dimensione delle righe (altezza), come posizionare gli elementi automaticamente posizionati e la dimensione automatica delle colonne.
grid-auto-flow grid-auto-rows / grid-template-columns Determina come posizionare gli elementi automaticamente posizionati, la dimensione automatica delle righe e l'impostazione della proprietà grid-template-columns.
initial Imposta questo attributo al suo valore predefinito. Vedi anche: initial.
inherit Eredita questo attributo dal suo elemento padre. Vedi anche: inherit.

Dettagli tecnici

Valore predefinito: nessuno nessuno nessuno automatico automatico riga
Ereditarietà: no
Produzione di animazioni: sì, vedere proprietà individuali. Vedi anche:Proprietà correlate agli animazioni.
Versione: Modulo Layout a griglia CSS Livello 1
Sintassi JavaScript: object.style.grid="250px / auto auto auto"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

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

Vedi anche:

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

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

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

Manuale di riferimento CSS:proprietà grid-auto-rows

Manuale di riferimento CSS:proprietà grid-auto-columns

Manuale di riferimento CSS:proprietà grid-auto-flow

Manuale di riferimento CSS:proprietà grid-row-gap

Manuale di riferimento CSS:proprietà grid-column-gap