Proprietà CSS grid-gap

Definizione e uso

La proprietà grid-gap definisce la dimensione dello spazio tra le righe e le colonne nella layout a griglia e è un'abbreviazione delle seguenti proprietà:

Attenzione:Questa proprietà è stata rinominata in CSS3 in gap.

Vedi anche:

Corso CSS:Layout a griglia CSS

Manuale di riferimento CSS:Proprietà grip-row-gap

Manuale di riferimento CSS:Proprietà grip-column-gap

Esempio

Esempio 1

Imposta l'abbreviazione tra righe e colonne a 50 pixel:

.grid-container {
  grid-gap: 50px;
}

Prova da solo

Esempio 2

Imposta la spaziatura tra le righe a 20 pixel e tra le colonne a 50 pixel:

.grid-container {
  grid-gap: 20px 50px;
}

Prova da solo

Sintassi CSS

grid-gap: grid-row-gap grid-column-gap;

Valore dell'attributo

Valore Descrizione
grid-row-gap Imposta la dimensione della spaziatura tra le righe nella layout a griglia. Il valore predefinito è 0.
grid-column-gap Imposta la dimensione della spaziatura tra le colonne. Il valore predefinito è 0.

Dettagli tecnici

Valore predefinito: 0 0
Ereditarietà: No
Produzione di animazioni: Supportato. Vedi:Proprietà correlate agli animazioni.
Versione: Modulo Layout di Grid CSS Livello 1
Sintassi JavaScript: object.style.gridGap="50px 100px"

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44