Elemento a griglia CSS
- Pagina precedente Contenitore a griglia CSS
- Pagina successiva Esempi CSS
Elementi figli (progetti)
Il contenitore di griglia contiene gli elementi di griglia.
Per default, ogni riga e colonna della griglia contiene un elemento di griglia, ma puoi impostare lo stile degli elementi per farli coprire più colonne e/o righe.
Proprietà grid-column:
grid-column La proprietà definisce in quale colonna posizionare l'elemento.
È possibile definire la posizione di inizio e fine dell'elemento.
Nota:grid-column Le proprietà sono abbreviazioni delle proprietà grid-column-start e grid-column-end.
Per posizionare un elemento, puoi utilizzare il numero di riga (line numbers) o usare la parola chiave "span" per definire il numero di colonne che l'elemento coprirà.
Esempio
rende "item1" partendo dalla colonna 1 e terminando prima della colonna 5:
.item1 {
grid-column: 1 / 5;
}
Esempio
rende "item1" partendo dalla colonna 1 e coprendo 3 colonne:
.item1 {
grid-column: 1 / span 3;
}
Esempio
rende "item2" partendo dalla colonna 2 e coprendo 3 colonne:
.item2 {
grid-column: 2 / span 3;
}
Attributo grid-row:
grid-row L'attributo definisce in quale riga posizionare l'elemento.
È possibile definire la posizione di inizio e fine dell'elemento.
Nota:grid-row è un abbreviazione degli attributi grid-row-start e grid-row-end.
Per posizionare un elemento, è possibile citare il numero della riga o utilizzare la parola chiave "span" per definire quante righe coprirà l'elemento:
Esempio
rende "item1" partendo dalla row-line 1 e terminando in row-line 4:
.item1 {
grid-row: 1 / 4;
}
Esempio
rende "item1" partendo dalla riga 1 e coprendo 2 righe:
.item1 {
grid-row: 1 / span 2;
}
Attributo grid-area
grid-area L'attributo può essere utilizzato come abbreviazione per gli attributi grid-row-start, grid-column-start, grid-row-end e grid-column-end.
Esempio
rende "item8" partendo da row-line 1 e column-line 2 e terminando in row-line 5 e column line 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Esempio
rende "item8" partendo da row-line 2 e column-line e copre 2 righe e 3 colonne:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Denominazione degli elementi di griglia
grid-area L'attributo può anche essere utilizzato per assegnare nomi agli elementi di griglia.
può essere utilizzato per assegnare nomi agli elementi di griglia del contenitore della griglia. grid-template-areas l'attributo per riferirsi agli elementi di griglia denominati.
Esempio
Il nome dell'elemento 'item1' è "myArea" e copre tutti e cinque i colonne del layout della griglia:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Ogni riga è definita da virgolette (' ').
Le colonne di ogni riga sono definite all'interno delle virgolette e separate da spazi.
Nota:I punti interrogativi rappresentano elementi di griglia senza nome.
Esempio
Far attraversare a "myArea" due colonne all'interno di un layout a griglia di cinque colonne (i punti interrogativi rappresentano elementi senza nome):
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
Per definire due righe, definisci la seconda riga all'interno di un altro gruppo di virgolette:
Esempio
Per far si che "item1" attraversi 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 template web sempre disponibile:
.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 elementi
La layout a griglia ci permette di posizionare gli elementi nel punto che preferiamo.
Il primo elemento nel codice HTML non deve essere visualizzato come il primo elemento della griglia.
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 degli schermi di alcune dimensioni utilizzando le query di media:
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; }
}
- Pagina precedente Contenitore a griglia CSS
- Pagina successiva Esempi CSS
