2.1 Proprietà display: grid
CSS Grid Layout è un potente sistema di layout che consente di creare layout complessi di pagine web utilizzando righe e colonne. Il passo principale quando lavori con CSS Grid è la creazione del contenitore Grid. Qua sotto vedremo come si utilizza la proprietà display: grid per creare un contenitore Grid e gestire i suoi aspetti di base.
Concetti principali per la creazione di un contenitore Grid
Proprietà display: grid
La proprietà display: grid definisce un elemento come contenitore Grid. Questo è il passo base che consente di sfruttare tutte le funzionalità di CSS Grid per il layout degli elementi.
Esempio:
.grid-container {
display: grid;
}
Elementi principali del contenitore Grid
Dopo aver definito il contenitore Grid con la proprietà display: grid, tutti gli elementi figli di questo contenitore diventano automaticamente elementi grid. Questo permette di gestire il loro posizionamento e allineamento all'interno del contenitore.
Esempio:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di contenitore Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
</div>
</body>
</html>
Spiegazione del codice:
.grid-container: definisce un elemento come contenitore Grid tramite la proprietàdisplay: grid. Aggiunge anche un bordo per evidenziare visivamente il contenitore.grid-item: definisce gli stili base per gli elementi all'interno del contenitore Grid, come colore di sfondo, colore del testo, padding, bordo e centraggio del testo
2.2 Contenitori Grid annidati
Uno dei vantaggi di CSS Grid è la possibilità di creare contenitori Grid annidati. Questo consente di creare layout complessi, dove un elemento grid può diventare un grid-container per i suoi elementi figli.
Esempio:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contenitori Grid annidati</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">Elemento annidato 1</div>
<div class="nested-grid-item">Elemento annidato 2</div>
</div>
</div>
<div class="grid-item">Elemento 3</div>
</div>
</body>
</html>
Spiegazione del codice:
-
.nested-grid-container: definisce un contenitore Grid annidato tramite la proprietàdisplay: grid, e aggiunge anche spazi tra gli elementi (gap: 5px) e padding interno (padding: 10px) -
.nested-grid-item: definisce gli stili di base per gli elementi all'interno del contenitore Grid annidato, come colore di sfondo, padding e bordo
2.3 Gestione del comportamento del contenitore Grid
La proprietà display: grid consente anche di utilizzare proprietà aggiuntive per gestire il comportamento del contenitore Grid. Ad esempio, la proprietà grid-auto-flow gestisce il posizionamento automatico degli elementi.
Esempio:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contenitore Grid con auto-flow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
<div class="grid-item">Elemento 5</div>
</div>
</body>
</html>
2.4 Uso di Flexbox all'interno di un contenitore Grid
In alcuni casi, l'uso di Flexbox all'interno degli elementi grid può essere utile per creare layout più complessi. Questo consente di combinare i vantaggi di entrambe le tecnologie.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox all'interno di un contenitore Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Elemento Flex 1</div>
<div class="flex-item">Elemento Flex 2</div>
</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
</div>
</body>
</html>
Spiegazione del codice:
.flex-container: definisce un elemento grid come un contenitore flex tramite la proprietàdisplay: flex.flex-item: definisce gli stili di base per gli elementi all'interno del contenitore flex, come colore di sfondo, padding e flessibilità (flex: 1)
GO TO FULL VERSION