1.1 Principi fondamentali del Grid Layout
CSS Grid Layout è uno strumento potente per creare layout complessi e adattivi. Offre ai developer un sistema a griglia bidimensionale per posizionare gli elementi, semplificando la creazione di layout sia semplici che complessi. Esaminiamo i concetti principali e la sintassi di CSS Grid, senza addentrarci nelle proprietà specifiche.
Concetti principali di CSS Grid
-
Grid container e Grid elementi:
-
Grid container è un elemento che include
display: grid. Questo elemento diventa il contenitore della griglia e tutti i suoi elementi figlio immediati diventano Grid elementi. - Grid elementi sono gli elementi figlio immediati del Grid container, che vengono posizionati nella griglia.
-
Grid container è un elemento che include
-
Assi della griglia:
- Asse principale (inline axis) e asse di blocco (block axis): Grid supporta due assi per posizionare gli elementi — l'asse principale e l'asse di blocco. Di default, l'asse principale è orizzontale, mentre l'asse di blocco è verticale.
-
Celle della griglia (Grid Cells):
- Celle della griglia sono i blocchi di base che si formano all'intersezione di righe e colonne. Ogni Grid elemento occupa una o più celle.
-
Linee della griglia (Grid Lines):
- Linee della griglia sono linee orizzontali e verticali che separano righe e colonne. Vengono usate per posizionare gli elementi rispetto alla griglia.
-
Aree della griglia (Grid Areas):
- Aree della griglia sono aree nominali della griglia, create unendo più celle. Permettono di raggruppare celle e posizionare elementi in aree specifiche.
1.2 Elementi sintattici
Elementi sintattici principali di CSS Grid
1. Creazione di un Grid container:
.container {
display: grid; /* o display: inline-grid */
}
2. Definizione della struttura della griglia:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Definisce tre colonne di larghezza diversa */
grid-template-rows: 50px 100px; /* Definisce due righe di altezza diversa */
}
3. Unione delle celle con grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* L'elemento occupa la prima riga e le prime tre colonne */
}
4. Posizionamento automatico degli elementi:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Imposta l'altezza minima delle righe */
}
1.3 Esempi
Esempio semplice di layout con CSS Grid:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Spiegazione:
- Il contenitore .container imposta tre colonne, di cui la prima e la terza occupano una porzione uguale dello spazio disponibile, mentre la seconda il doppio.
- Vengono impostate due righe con altezza fissa.
- La proprietà gap imposta la distanza tra le celle della griglia.
GO TO FULL VERSION