In questa lezione affronteremo i seguenti argomenti:
• Comprendere il concetto di Grid Layout in CSS3.
• Apprendere come utilizzare Grid Layout per creare layout complessi e organizzati.
• Conoscere i principali concetti di righe, colonne, elementi grid e template grid.
Concetti Base del Grid Layout
- Grid Layout permette di creare layout bidimensionali con righe e colonne.
- il container grid (elemento padre) è dichiarato utilizzando display: grid;.
- gli elementi figlio diventano automaticamente elementi grid all'interno del container.
/* Dichiarazione del container grid */
.grid-container {
display: grid;
grid-template-rows: 100px 200px; /* Definisce le altezze delle righe */
grid-template-columns: 1fr 2fr; /* Definisce le larghezze delle colonne */
}
/* Dichiarazione degli elementi grid */
.grid-item {
/* Opzioni di posizionamento, ad esempio: */
grid-row: 1 / 3; /* Inizia dalla riga 1 e finisce alla riga 3 */
grid-column: 2 / span 3; /* Inizia dalla colonna 2 e si estende di 3 colonne */
}
Template Grid e Posizionamento Implicito
- grid-template-areas consente di organizzare il layout utilizzando nomi di aree.
- posizionamento implicito degli elementi senza specificare riga o colonna.
/* Esempio di utilizzo di grid-template-areas */
.grid-container {
display: grid;
grid-template-areas:
'header header'
'sidebar content'
'footer footer';
}
/* Esempio di posizionamento implicito */
.grid-item {
grid-row: span 2; /* Occupa due righe */
}
Allineamento e Spaziatura
- justify-items allinea gli elementi lungo l'asse principale.
- align-items allinea gli elementi lungo l'asse trasversale.
- gap imposta lo spazio tra righe e colonne.
/* Esempio di allineamento e spaziatura */
.grid-container {
display: grid;
justify-items: center;
align-items: center;
gap: 10px;
}
Attività Pratica
- Creare un layout grid utilizzando Grid Layout.
- Utilizzare grid-template-rows e grid-template-columns per definire la struttura del layout.
- Sperimentare con grid-template-areas per organizzare il layout in sezioni.
- Regolare l'allineamento e la spaziatura degli elementi grid.