6.1 Proprietà grid-gap
CSS Grid Layout offre strumenti flessibili per gestire lo spazio tra gli elementi della griglia. Le proprietà
grid-gap, grid-row-gap e grid-column-gap permettono di definire facilmente la distanza
tra righe e colonne, aiutando nella creazione di layout puliti e ordinati. Esploriamo queste proprietà più in dettaglio.
La proprietà grid-gap (abbreviato gap) definisce la distanza generale tra righe e colonne nella griglia.
Questa proprietà è una forma abbreviata per grid-row-gap e grid-column-gap.
Sintassi:
.grid-container {
grid-gap: value;
}
Dove:
-
value: il valore dello spazio tra le righe e le colonne. Può essere specificato in varie unità di misura (px,%,fr,autoecc.)
Esempio 1: Valore unico per righe e colonne
In questo esempio, uno spazio di 20px verrà applicato sia alle righe che alle colonne:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* Spazio di 20px tra tutte le righe e le colonne */
}
Esempio 2: Valori diversi per righe e colonne
In questo esempio si utilizzano due valori: il primo (10px) per le righe e il secondo (20px) per le colonne:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 10px tra le righe, 20px tra le colonne */
}
6.2 Proprietà grid-row-gap
La proprietà grid-row-gap definisce la distanza tra le righe nella griglia. Questo permette di specificare
un valore separato per lo spazio tra le righe, indipendente dalle colonne.
Sintassi:
.grid-container {
grid-row-gap: value;
}
Dove:
value: il valore dello spazio tra le righe. Può essere specificato in varie unità di misura
Esempio 1: Impostazione di uno spazio fisso tra le righe
In questo esempio, la distanza tra le righe sarà di 15px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* Spazio di 15px tra le righe */
}
Esempio 2: Uso delle percentuali per definire lo spazio
In questo esempio, la distanza tra le righe sarà del 5% dell'altezza della riga:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* Spazio del 5% dell'altezza della riga */
}
6.3 Proprietà grid-column-gap
La proprietà grid-column-gap definisce la distanza tra le colonne nella griglia. Questo permette di specificare
un valore separato per lo spazio tra le colonne, indipendente dalle righe.
Sintassi:
.grid-container {
grid-column-gap: value;
}
Dove:
value: il valore dello spazio tra le colonne. Può essere specificato in varie unità di misura
Esempio 1: Impostazione di uno spazio fisso tra le colonne
In questo esempio, la distanza tra le colonne sarà di 25px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* Spazio di 25px tra le colonne */
}
Esempio 2: Uso di em per definire lo spazio
In questo esempio, la distanza tra le colonne sarà di 2em:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* Spazio di 2em tra le colonne */
}
6.4 Uso combinato di grid-row-gap e grid-column-gap
Puoi combinare le proprietà grid-row-gap e grid-column-gap per un controllo più preciso
degli spazi tra righe e colonne.
Esempio di implementazione completa:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Tre colonne di uguale larghezza */
grid-template-rows: repeat(3, 100px); /* Tre righe di altezza fissa */
grid-row-gap: 15px; /* Spazio di 15px tra le righe */
grid-column-gap: 25px; /* Spazio di 25px tra le colonne */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
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>Esempio di utilizzo di grid-gap, grid-row-gap e grid-column-gap</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Elemento 1</div>
<div class="grid-item item2">Elemento 2</div>
<div class="grid-item item3">Elemento 3</div>
<div class="grid-item item4">Elemento 4</div>
<div class="grid-item item5">Elemento 5</div>
<div class="grid-item item6">Elemento 6</div>
</div>
</body>
</html>
Spiegazione del codice:
-
.grid-container: crea un container grid con tre colonne di uguale larghezza e tre righe di altezza fissa. Utilizza le proprietàgrid-row-gapegrid-column-gapper definire gli spazi tra righe e colonne -
.grid-item: definisce gli stili di base per gli elementi della griglia, come il colore di sfondo, il colore del testo, padding, centratura del testo e bordo
GO TO FULL VERSION