Elemento griglia CSS
1
2
3
4
5
Elementi figlio (elementi)
Un contenitore della griglia contiene elementi della griglia .
Per impostazione predefinita, un contenitore ha un elemento della griglia per ogni colonna, in ogni riga, ma puoi modellare gli elementi della griglia in modo che si estendano su più colonne e/o righe.
La proprietà della colonna della griglia:
La grid-columnproprietà definisce su quali colonne posizionare un elemento.
Definisci dove inizierà l'elemento e dove finirà l'elemento.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Nota: la grid-columnproprietà è una proprietà abbreviata per grid-column-starte le grid-column-endproprietà.
Per posizionare un elemento, puoi fare riferimento ai numeri di riga o utilizzare la parola chiave "span" per definire il numero di colonne che si estenderà all'elemento.
Esempio
Fai in modo che "item1" inizi sulla colonna 1 e finisca prima della colonna 5:
.item1 {
grid-column: 1 / 5;
}
Esempio
Fai in modo che "item1" inizi sulla colonna 1 e si estenda su 3 colonne:
.item1 {
grid-column: 1 / span 3;
}
Esempio
Fai in modo che "item2" inizi sulla colonna 2 e si espanda su 3 colonne:
.item2 {
grid-column: 2 / span 3;
}
La proprietà della riga della griglia:
La grid-rowproprietà definisce su quale riga posizionare un elemento.
Definisci dove inizierà l'elemento e dove finirà l'elemento.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Nota: la grid-rowproprietà è una proprietà abbreviata per grid-row-starte le grid-row-endproprietà.
Per posizionare un elemento, puoi fare riferimento ai numeri di riga o utilizzare la parola chiave "span" per definire quante righe si estenderà l'elemento:
Esempio
Fai in modo che "item1" inizi sulla riga 1 e finisca sulla riga 4:
.item1 {
grid-row: 1 / 4;
}
Esempio
Fai in modo che "item1" inizi sulla riga 1 e si estenda su 2 righe:
.item1 {
grid-row: 1 / span 2;
}
La proprietà dell'area della griglia
La grid-areaproprietà può essere utilizzata come proprietà abbreviata per
grid-row-start, grid-column-start, grid-row-ende le grid-column-endproprietà.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Esempio
Fai in modo che "item8" inizi sulla riga 1 e sulla riga 2 della colonna e termini sulla riga 5 e sulla riga 6 della colonna:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Esempio
Fai in modo che "item8" inizi sulla riga riga 2 e sulla riga colonna 1 e si estenda su 2 righe e 3 colonne:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Denominazione degli elementi della griglia
La grid-areaproprietà può essere utilizzata anche per assegnare nomi agli elementi della griglia.
Intestazione
Menù
Principale
Destra
Piè di pagina
Gli elementi della griglia con nome possono essere indicati dalla grid-template-areasproprietà del contenitore della griglia.
Esempio
Item1 ottiene il nome "myArea" e si estende su tutte e cinque le colonne in un layout a griglia di cinque colonne:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Ogni riga è definita da apostrofi (' ')
Le colonne di ogni riga sono definite all'interno degli apostrofi, separate da uno spazio.
Nota: un punto rappresenta un elemento della griglia senza nome.
Esempio
Lascia che "myArea" si estenda su due colonne in un layout a griglia di cinque colonne (i segni di punto rappresentano elementi senza nome):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
Per definire due righe, definire la colonna della seconda riga all'interno di un altro insieme di apostrofi:
Esempio
Fai in modo che "item1" si estenda su due colonne e due righe:
.grid-container {
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 {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
L'ordine degli articoli
Il layout della griglia ci consente di posizionare gli elementi ovunque desideriamo.
Il primo elemento nel codice HTML non deve apparire come primo elemento nella griglia.
1
2
3
4
5
6
Esempio
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Puoi riorganizzare l'ordine per determinate dimensioni dello schermo, utilizzando le query multimediali:
Esempio
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}