Proprietà grid-area CSS

Definizione e uso

L'attributo grid-area dimensione degli elementi di griglia e la loro posizione nel layout a griglia, è un abbreviazione degli attributi seguenti:

L'attributo grid-area può anche essere utilizzato per assegnare un nome agli elementi di griglia. Successivamente, attraverso il contenitore della griglia, grid-template-areas Riferimento agli attributi dei progetti di griglia denominati. Vedi gli esempi di seguito.

Vedi anche:

Tutorial CSS:Layout a griglia CSS

Esempio

Esempio 1

Porta "item1" a iniziare dalla riga 2 colonna 1 e a coprire due righe e tre colonne:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Prova personalmente

Suggerimento:Più esempi sono disponibili nella parte inferiore della pagina.

Sintassi CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Valore dell'attributo

Valore Descrizione
grid-row-start Stabilisce da quale riga iniziare a visualizzare l'elemento.
grid-column-start Stabilisce da quale colonna iniziare a visualizzare l'elemento.
grid-row-end Definire in quale linea di riga fermare la visualizzazione dell'elemento, o su quante righe superare.
grid-column-end Specificare in quale linea di colonna fermare la visualizzazione dell'elemento, o su quante colonne superare.
itemname Definisce l'elemento del progetto della griglia.

Dettagli tecnici

Valore predefinito: auto / auto / auto / auto
Ereditarietà: No
Creazione di animazioni: Supportato. Vedi:Proprietà correlate agli animazioni.
Versione: Modulo Layout a Griglia CSS Livello 1
Sintassi JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

Più esempi

Esempio 2

Item1 è stato denominato "myArea" e copre tutti e cinque le colonne nel layout a griglia di cinque colonne:

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

Prova personalmente

Esempio 3

Fai incrociare "myArea" su due colonne in un layout a griglia di cinque colonne (i punti interrogativi rappresentano elementi senza nome):

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

Prova personalmente

Esempio 4

Fai incrociare "item1" su due colonne e due righe:

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

Prova personalmente

Esempio 5

Nomeggia tutti gli elementi e crea un template di pagina 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';
}

Prova personalmente

Supporto del browser

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

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