Proprietà CSS grid-row-gap
Scopri come CSS grid-row-gap imposta lo spazio tra le righe della griglia, con sintassi, valori ed esempi pratici.
La proprietà CSS grid-row-gap imposta la dimensione dello spazio (il gutter) tra le righe di un contenitore grid. Inserisce spazio tra le righe — mai prima della prima riga o dopo l'ultima — quindi non crea margini esterni inattesi.
Questa proprietà agisce solo sugli elementi il cui display è grid o inline-grid. Non ha effetto sui layout Flexbox o multi-colonna; per quelli, usa la proprietà standard column-gap o la sintassi abbreviata universale gap.
grid-row-gap è ora un alias della proprietà standard row-gap, che funziona con layout grid, Flexbox e multi-colonna. I browser li trattano in modo identico in un contesto grid. Preferisci row-gap (o la sintassi abbreviata grid-gap che imposta entrambi gli assi contemporaneamente) nel nuovo codice. grid-row-gap rimane valido ed è mantenuto per compatibilità con le versioni precedenti.
Riferimento rapido
| Valore iniziale | normal (trattato come 0 nella griglia) |
| Si applica a | Contenitori grid |
| Ereditato | No |
| Animabile | Sì |
| Spec | CSS Grid Layout Module Level 1 |
| Sintassi DOM | element.style.gridRowGap = "30px" |
Quando usarlo
Ricorri a grid-row-gap quando desideri una spaziatura verticale prevedibile tra le righe della griglia senza affidarti ai margini sui singoli elementi. I margini tra gli elementi grid sono scomodi — si comprimono in modo non uniforme, aggiungono spazio ai bordi e sono più difficili da aggiornare globalmente. Un row gap, al contrario, si trova solo tra le righe e mantiene i bordi esterni della griglia a filo, rendendo la spaziatura facile da gestire.
Combinalo con grid-column-gap per la spaziatura orizzontale, oppure sostituisci entrambi con la sintassi abbreviata grid-gap quando vuoi impostare i gutter di riga e colonna allo stesso tempo.
Sintassi
/* keyword */
grid-row-gap: normal;
/* absolute length */
grid-row-gap: 20px;
grid-row-gap: 1.5em;
/* percentage of the container's block size */
grid-row-gap: 10%;
/* global values */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;Valori
| Valore | Descrizione |
|---|---|
normal | La spaziatura predefinita del browser. Si risolve in 0 all'interno di un contenitore grid. |
<length> | Un valore di lunghezza CSS non negativo (px, em, rem, vw, ecc.). |
<percentage> | Una percentuale non negativa calcolata rispetto all'asse del blocco (altezza) del contenitore grid. |
inherit | Assume il valore calcolato dall'elemento padre. |
initial | Reimposta la proprietà al suo valore iniziale (normal). |
unset | Si comporta come inherit se la proprietà è ereditabile, altrimenti come initial. |
Esempi
Nessun gap tra le righe (predefinito)
Con grid-row-gap: 0, le righe si trovano direttamente una accanto all'altra senza gutter verticale. Solo il grid-column-gap separa gli elementi orizzontalmente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
grid-row-gap: 0;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-row-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 class="box8">8</div>
</div>
</body>
</html>![Esempio CSS grid-row-gap senza gap tra le righe](/uploads/media/default/0001/04/4123ae945c3b6e7b25f0fc5911ae459f604c3c1c.png "Esempio CSS grid-row-gap senza gap tra le righe" =420x)
Gap fisso in pixel
Impostando grid-row-gap: 40px si aggiunge un gutter di 40 pixel tra ogni coppia di righe. Il gap di colonna rimane separato ed è controllato indipendentemente da grid-column-gap.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
grid-row-gap: 40px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-row-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>Gap in percentuale
Un valore percentuale viene calcolato rispetto alla dimensione del blocco del contenitore grid (la sua altezza). Ciò significa che il gap cresce proporzionalmente quando il contenitore è più alto, il che può essere utile per layout fluidi sensibili al rapporto d'aspetto. Per la maggior parte dei layout di contenuto, un valore fisso in px o rem è più prevedibile.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 15%;
grid-column-gap: 3%;
background-color: grey;
padding: 40px;
}
.grid-container > div {
background-color: white;
text-align: center;
padding: 25px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>Migrazione al moderno row-gap
La specifica CSS Grid si è in seguito allineata alle convenzioni gap di multi-colonna e Flexbox, rinominando grid-row-gap in row-gap. I due sono intercambiabili in un contesto grid, ma row-gap funziona anche nei contenitori Flexbox e multi-colonna. La migrazione è un semplice cambio di nome su una riga:
/* Legacy — still valid, but prefer row-gap in new code */
grid-row-gap: 20px;
/* Modern equivalent */
row-gap: 20px;
/* Shorthand: sets row-gap and column-gap at once */
gap: 20px 10px; /* row-gap: 20px; column-gap: 10px */
gap: 20px; /* both row-gap and column-gap: 20px */Tutti i principali browser supportano row-gap per la griglia dall'inizio del 2020, quindi non esiste alcuna ragione pratica di compatibilità per continuare a usare il nome grid-row-gap nei nuovi progetti.
Problemi comuni
- Gap in percentuale e altezza intrinseca. Quando il contenitore grid non ha un'altezza esplicita, il browser non può calcolare un gap di riga in percentuale finché non conosce l'altezza del contenitore — che a sua volta dipende dal contenuto. Questa dipendenza circolare può far sì che il gap si risolva in
0. Usapxorema meno che il contenitore abbia un'altezza fissa. - I valori negativi non sono consentiti. A differenza dei margini,
grid-row-gapaccetta solo valori zero o positivi. Tentare di impostare un gap negativo non è valido e la dichiarazione viene ignorata. - Il gap non aggiunge spazio esterno.
grid-row-gapaggiunge spazio solo tra le righe. Se hai bisogno di padding attorno all'intera griglia, usa la proprietàpaddingdel contenitore. - Gli elementi che si estendono su più righe non sono influenzati. Un elemento che si estende su più righe con
grid-row: span 2beneficia comunque del gap tra quelle righe come parte del suo spazio allocato.
Proprietà correlate
grid-column-gap— imposta il gap tra le colonne della griglia.grid-gap— sintassi abbreviata che imposta siagrid-row-gapchegrid-column-gapcontemporaneamente.column-gap— la proprietà moderna e indipendente dal layout per la spaziatura delle colonne.grid-template-columns— definisce le tracce di colonna tra cui si trova il gap.grid-template-rows— definisce le tracce di riga separate da questo gap.grid-auto-rows— controlla la dimensione delle righe create implicitamente.