Proprietà CSS grid-gap
La proprietà CSS grid-gap definisce la dimensione dello spazio tra righe e colonne di un layout a griglia. Scopri come usarla con esempi pratici.
La proprietà grid-gap imposta la dimensione dello spazio (gutter) tra le righe e le colonne di un layout a griglia. Il gap è lo spazio vuoto tra le tracce della griglia — non aggiunge mai spazio sui bordi esterni della griglia, quindi il padding del contenitore controlla ancora il margine esterno.
grid-gap è una forma abbreviata per due proprietà complete:
- grid-row-gap — la dimensione del gap tra le righe.
- grid-column-gap — la dimensione del gap tra le colonne.
grid-gap vs. gap
La proprietà standard gap ha sostituito grid-gap. Le due si comportano in modo identico all'interno di un contenitore griglia, ma grid-gap è ora considerata legacy: esiste principalmente per i browser più vecchi che hanno incluso la versione con prefisso grid prima che l'unprefixed gap venisse standardizzato. I browser moderni supportano ancora grid-gap come alias, quindi i fogli di stile esistenti continuano a funzionare.
Per i nuovi progetti, è preferibile usare gap — funziona sia nei layout a griglia che in quelli flexbox, mentre grid-gap si applicava solo alle griglie:
/* Legacy (grid only) */
.grid { display: grid; grid-gap: 20px 40px; }
/* Modern, preferred */
.grid { display: grid; gap: 20px 40px; }| Valore iniziale | 0 |
|---|---|
| Si applica a | Contenitori griglia. |
| Ereditabile | No. |
| Animabile | Sì. grid-gap è animabile. |
| Versione | CSS Grid Layout Module Level 1 |
| Sintassi DOM | object.style.gridGap = "30px 70px"; |
Sintassi
Proprietà CSS grid-gap
grid-gap: <row-gap> <column-gap>;La proprietà accetta uno o due valori di lunghezza:
- Un valore imposta il gap tra righe e il gap tra colonne alla stessa dimensione.
- Due valori impostano prima il gap tra righe, poi il gap tra colonne (
grid-gap: 20px 40px;significa un gap di 20px tra le righe e un gap di 40px tra le colonne).
Ogni valore può essere qualsiasi lunghezza non negativa (px, em, rem, ecc.) o una percentuale. Sono valide anche le parole chiave initial e inherit.
Esempio della proprietà grid-gap:
Esempio di un contenitore griglia con la proprietà grid-gap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 60px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-gap property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>Risultato
![Proprietà CSS grid-gap](/uploads/media/default/0001/04/91075707603fef2480969077540f999b813f30aa.png "Griglia con un gap di 60px tra ogni riga e colonna" =420x)
Esempio della proprietà grid-gap specificata in percentuali:
Un gap in percentuale viene calcolato in base alle dimensioni proprie del contenitore griglia — il gap tra colonne è una percentuale della larghezza del contenitore, mentre il gap tra righe è una percentuale della sua altezza. Le percentuali sono utili per i layout fluidi, ma fanno crescere il gutter insieme al contenitore, quindi le lunghezze fisse sono generalmente più prevedibili.
Esempio di un contenitore griglia in cui il gap è definito tramite percentuali
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20%;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-gap property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>Esempio della proprietà grid-gap con due valori:
Quando si passano due valori, il primo imposta il gap tra righe e il secondo imposta il gap tra colonne. In questo caso le righe sono separate da 20px e le colonne da 80px:
Esempio di una proprietà CSS grid-gap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20px 80px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-gap property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| grid-row-gap | Specifica la dimensione del gap tra le righe in un layout a griglia. Il valore predefinito è 0. Quando si utilizza la sintassi a due valori, corrisponde al primo valore. | |
| grid-column-gap | Specifica la dimensione del gap tra le colonne in un layout a griglia. Il valore predefinito è 0. Quando si utilizza la sintassi a due valori, corrisponde al secondo valore. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento padre. |
Supporto browser
grid-gap è supportato in tutti i browser moderni. Poiché è un alias per la proprietà standard gap, in genere non è necessario usare entrambi. Se è necessario supportare implementazioni di griglia molto vecchie, è possibile indicare grid-gap per queste e gap per tutto il resto:
.grid {
display: grid;
grid-gap: 20px; /* fallback for legacy browsers */
gap: 20px; /* standard property wins where supported */
}Proprietà correlate
- grid-row-gap e grid-column-gap — le proprietà complete che
grid-gapcombina. - grid — la forma abbreviata per un intero layout a griglia.
- grid-template-columns — definisce le colonne tra cui si trovano i gap.