Proprietà CSS grid-column-gap

La proprietà grid-column-gap imposta la dimensione dello spazio vuoto (il margine) tra le colonne di un layout CSS Grid. Controlla solo la spaziatura orizzontale tra le tracce di colonna — non aggiunge mai spazio sui bordi esterni del contenitore della griglia.

Il valore può essere una lunghezza fissa (come px, rem o em) oppure una percentuale. Quando si usa una percentuale, essa viene calcolata rispetto alla dimensione inline (la larghezza) del contenitore della griglia.

Attenzione

grid-column-gap è deprecata. Era un nome specifico delle griglie adottato nelle prime versioni e che i browser hanno poi rinominato. Nel nuovo codice, usa la moderna proprietà column-gap, oppure la scorciatoia gap per impostare contemporaneamente i margini di riga e di colonna. Tutti i browser attuali accettano ancora grid-column-gap come alias di column-gap, quindi i layout esistenti continuano a funzionare — ma non c'è motivo di scriverla nei nuovi fogli di stile.

Perché usare gap invece dei margini?

Prima che esistessero le proprietà gap, gli autori creavano la spaziatura tra gli elementi della griglia con margin, dovendo poi annullare il margine in eccesso che fuoriusciva dal primo e dall'ultimo elemento. grid-column-gap risolve questo problema in modo pulito: lo spazio appare solo tra le tracce di colonna, così la griglia rimane a filo con il suo contenitore su entrambi i lati. Il browser mantiene inoltre lo spazio costante man mano che le tracce crescono o si riducono, cosa che i margini non possono garantire.

Riferimento alla proprietà

Proprietà	Valore
Valore iniziale	`normal` (equivalente a `0` nella griglia)
Si applica a	Contenitori Grid
Ereditata	No
Animabile	Sì
Versione	CSS Grid Layout Module Level 1
Sintassi DOM	`object.style.gridColumnGap = "30px"`

Sintassi

grid-column-gap: <length-percentage> | normal | initial | inherit;

<length-percentage> — un valore non negativo in px, em, rem, ch, vw o %. I valori negativi non sono validi.
normal — il valore predefinito del browser, che si risolve in 0 in un contesto di griglia.
initial — reimposta la proprietà al suo valore iniziale (normal).
inherit — eredita il valore calcolato dall'elemento padre (raramente utile poiché grid-column-gap non è ereditata).

Esempi

Spazio fisso (px)

Il caso più comune: uno spazio fisso in pixel che rimane della stessa dimensione indipendentemente dalla larghezza del contenitore.

<!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: 30px;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-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>

Provalo tu stesso »

Risultato

I dodici elementi si distribuiscono in quattro colonne; ogni colonna è separata dalla successiva da 30px, mentre grid-row-gap: 10px mantiene le righe distanziate.

Spazio percentuale (%)

Un valore percentuale viene calcolato rispetto alla dimensione inline (larghezza) del contenitore della griglia. I margini crescono e si riducono al ridimensionamento del contenitore.

<!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: 20%;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-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>

Provalo tu stesso »

I margini percentuali sono raramente la soluzione ideale: con tre margini ciascuno al 20%, i margini da soli consumano il 60% del contenitore — lasciando solo il 40% a quattro tracce di colonna auto. Le lunghezze fisse (px, rem, em) offrono margini molto più prevedibili.

Migrazione alla sintassi moderna

La sostituzione è una semplice rinomina — il valore è identico, cambia solo il nome della proprietà:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  /* Deprecated — avoid in new code */
  grid-column-gap: 30px;

  /* Modern equivalent */
  column-gap: 30px;

  /* Or set both axes at once with the gap shorthand */
  /* gap: <row-gap> <column-gap>; */
  gap: 10px 30px;
}

gap: 10px 30px è equivalente a row-gap: 10px; column-gap: 30px;. Passare un singolo valore — gap: 30px — lo applica sia alle righe che alle colonne. La scorciatoia gap funziona anche all'interno dei contenitori Flexbox, rendendola la scelta più versatile.

Come i gap interagiscono con le unità fr

Quando si combina un gap con colonne fr, il browser sottrae tutto lo spazio dei gap dalla larghezza disponibile prima di distribuire le quote fr. Ciò significa che i gap non influenzano mai il rapporto tra le tracce:

.grid {
  display: grid;
  /* Three equal columns; gaps come out of available space first */
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px; /* modern equivalent of grid-column-gap: 24px */
}

Se il contenitore è largo 300px e ci sono due gap di 24px ciascuno, i restanti 252px vengono divisi equamente: ogni colonna è larga 84px. Questo è uno dei motivi per cui le tracce fr abbinate a un column-gap fisso (o grid-column-gap) producono layout più prevedibili rispetto ai gap basati su percentuale.

Valori

Valore	Descrizione
`<length>`	Uno spazio fisso in `px`, `em`, `rem`, ecc. I valori negativi non sono consentiti.
`<percentage>`	Una percentuale della dimensione inline (larghezza) del contenitore della griglia.
`normal`	Il valore predefinito del browser, che equivale a `0` all'interno di una griglia.
`initial`	Reimposta al valore iniziale (`normal`).
`inherit`	Usa il valore calcolato dell'elemento padre.

Esercitazione

Pratica

Qual è lo scopo della proprietà 'column-gap' nel layout CSS grid?

Imposta la dimensione dello spazio tra le colonne.Imposta la dimensione dello spazio tra le righe.Determina il colore delle linee della griglia.Prima dell'introduzione della proprietà 'gap', 'column-gap' veniva usata per creare spaziature.Allinea gli elementi della griglia lungo l'asse delle colonne.

Proprietà correlate

column-gap — il moderno sostituto di questa proprietà.
gap — scorciatoia per impostare insieme i margini di riga e di colonna.
grid-row-gap — la proprietà corrispondente per i margini verticali tra le righe.
grid-template-columns — definisce le tracce di colonna tra cui si trovano i gap.
grid-template-rows — definisce le tracce di riga su cui agisce grid-row-gap.
grid — la scorciatoia che trasforma un elemento in un contenitore di griglia.