5 – Layout con CSS Grid
1. Introduzione al Grid System
CSS Grid è un sistema di layout bidimensionale, che consente di posizionare elementi sia in righe (rows) che in colonne (columns), rendendo più semplice creare layout complessi e responsive rispetto a Flexbox (che è più indicato per un asse principale).
Vantaggi principali
-
Controllo preciso su righe e colonne.
-
Possibilità di ridimensionare automaticamente gli elementi.
-
Facilita la creazione di homepage, magazine, dashboard.
2. Container Grid e Items
2.1 Container Grid
Per definire un container grid:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* definizione colonne */
grid-template-rows: 100px auto 50px; /* definizione righe */
gap: 15px; /* spazio tra righe e colonne */
}
-
fr = frazioni dello spazio disponibile.
-
gap = distanza tra righe e colonne.
-
grid-template-columns e grid-template-rows definiscono la struttura del layout.
2.2 Items
Gli elementi figli del container grid diventano automaticamente grid items.
Possono essere posizionati usando:
.item1 {
grid-column: 1 / 3; /* occupa colonne 1 e 2 */
grid-row: 1 / 2; /* prima riga */
}
3. Proprietà principali del container
| Proprietà |
Funzione |
| display: grid |
Trasforma l’elemento in container Grid |
| grid-template-columns/rows |
Definisce numero e dimensione di colonne/righe |
| gap |
Spaziatura tra righe e colonne |
| grid-auto-rows/columns |
Dimensione automatica di righe o colonne non definite |
| justify-items / align-items |
Allineamento degli items all’interno delle celle |
| justify-content / align-content |
Allineamento dell’intera griglia all’interno del container |
4. Posizionamento avanzato degli elementi
.item {
grid-column: 2 / 4; /* dalla colonna 2 alla 3 inclusa */
grid-row: 1 / 3; /* dalla riga 1 alla 2 inclusa */
}
.container {
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
.item {
justify-self: center; /* or start, end, stretch */
align-self: center; /* or start, end, stretch */
}
5. Esercizio svolto: homepage di un magazine
Obiettivo
Creare una homepage con:
-
Header
-
Sidebar
-
Contenuto principale
-
Footer
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Magazine Grid</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="container">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="content">Contenuto principale</main>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
CSS (stile.css)
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* Container Grid */
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 100px auto 50px;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
gap: 15px;
padding: 15px;
background-color: #f2f2f2;
}
/* Header */
.header {
grid-area: header;
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* Sidebar */
.sidebar {
grid-area: sidebar;
background-color: #4fa3f2;
color: white;
padding: 15px;
}
/* Content */
.content {
grid-area: content;
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
}
/* Footer */
.footer {
grid-area: footer;
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
Risultato
-
Layout a due colonne con header e footer su tutta la larghezza.
-
Sidebar e contenuto principali affiancati.
-
Layout responsive-friendly perché la griglia può essere facilmente modificata con media queries.
Commenti
Posta un commento