Propriété gap de CSS

Définition et utilisation

La propriété gap définit la taille de l'intervalle entre les lignes et les colonnes dans un agencement flexbox, en grille ou en multicolumns. C'est une propriété abrégée pour les propriétés suivantes :

Attention :La propriété gap était auparavant appelée grid-gap.

Voir également :

Tutoriel CSS :Agencement en grille CSS

Tutoriel CSS :Agencement en cadre élastique CSS

Tutoriel CSS :Agencement multicolumns CSS

Manuel de référence CSS :Propriété row-gap

Manuel de référence CSS :Propriété column-gap

Exemple

Exemple 1

Définir l'intervalle entre les lignes et les colonnes à 50px :

.grid-container {
  gap: 50px;
}

Essayez-le vous-même

Exemple 2 : Agencement en grille

Définir l'intervalle entre les lignes à 20px et entre les colonnes à 50px dans un agencement en grille :

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

Essayez-le vous-même

Exemple 3 : Agencement en cadre élastique

Définir l'intervalle entre les lignes à 20px et entre les colonnes à 70px dans un agencement en cadre élastique :

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

Essayez-le vous-même

Exemple 4 : Agencement multicolumns

Définir l'intervalle entre les colonnes dans un agencement multicolumns à 50px :

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

Essayez-le vous-même

Syntaxe CSS

gap: row-gap column-gap|initial|inherit;
Valeur Description
row-gap Définit la taille de l'intervalle entre les lignes dans un agencement en grille ou en cadre élastique.
column-gap Définit la taille de l'intervalle entre les colonnes dans un agencement en grille, en cadre élastique ou en multicolumns.
initial Règle cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : normal normal
Héritage : Non
Réalisation des animations : Pris en charge. Voir les propriétés individuelles. Voir :Propriétés liées aux animations.
Version : Module d'alignement des boîtes CSS niveau 3
Syntaxe JavaScript : object.style.gap="50px 100px"

Prise en charge du navigateur

Les numéros dans le tableau indiquent la première version de navigateur prenant en charge cette propriété.

Agencement Chrome IE / Edge Firefox Safari Opera
Dans la grille 66 16 61 12 53
Dans le cadre élastique 84 84 63 14.1 70
Dans plusieurs colonnes 66 16 61 Non pris en charge 53