Proprietà gap CSS

Definizione e uso

La proprietà gap definisce la dimensione dello spaziatura tra le righe e le colonne in un layout flexbox, griglia o a più colonne. È un'abbreviazione delle seguenti proprietà:

Attenzione:La proprietà gap era precedentemente chiamata grid-gap.

Vedi anche:

Lezione CSS:Layout a griglia CSS

Lezione CSS:Layout a griglia flessibile CSS

Lezione CSS:Layout a più colonne CSS

Manuale CSS:Proprietà row-gap

Manuale CSS:Proprietà column-gap

Esempio

Esempio 1

Imposta lo spaziatura tra righe e colonne a 50px:

.grid-container {
  gap: 50px;
}

Prova personalmente

Esempio 2: Layout a griglia

Imposta lo spaziatura tra le righe a 20px e tra le colonne a 50px nel layout a griglia:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Prova personalmente

Esempio 3: Layout a griglia flessibile

Imposta lo spaziatura tra le righe a 20px e tra le colonne a 70px nel layout a griglia flessibile:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Prova personalmente

Esempio 4: Layout a più colonne

Imposta lo spaziatura tra le colonne in un layout a più colonne a 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

Prova personalmente

Sintassi CSS

gap: row-gap column-gap|initial|inherit;
Valore Descrizione
row-gap Imposta la dimensione dello spaziatura tra le righe in una griglia o una griglia flessibile.
column-gap Imposta la dimensione dello spaziatura tra le colonne in una griglia, una griglia flessibile o un layout a più colonne.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: normal normal
Ereditarietà: No
Produzione di animazione: Supportato. Vedi le proprietà separate. Vedi:Proprietà correlate all'animazione.
Versione: Modulo di allineamento dei box CSS livello 3
Sintassi JavaScript: object.style.gap="50px 100px"

Supporto del browser

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

Layout Chrome IE / Edge Firefox Safari Opera
Nella griglia 66 16 61 12 53
Nella griglia flessibile 84 84 63 14.1 70
In più colonne 66 16 61 Non supportato 53