propriété CSS grid-gap

Définition et utilisation

L'attribut grid-gap définit la taille de l'intervalle entre les lignes et les colonnes du layout en grille, c'est une propriété abrégée des attributs suivants :

Remarque :Cette propriété a été renommée en CSS3 sous le nom de gap.

Voir également :

Tutoriel CSS :Mise en page en grille CSS

Manuel de référence CSS :Attribut grip-row-gap

Manuel de référence CSS :Attribut grip-column-gap

Exemple

Exemple 1

Définir l'intervalle entre les lignes et les colonnes en abrégé à 50 pixels :

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

Essayez-le vous-même

Exemple 2

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

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
grid-row-gap Définir la taille de l'intervalle entre les lignes du layout en grille. La valeur par défaut est 0.
grid-column-gap Définir la taille de l'intervalle entre les colonnes. La valeur par défaut est 0.

Détails techniques

Valeur par défaut : 0 0
Héritage : Non
Réalisation de l'animation : Supporté. Voir :Propriétés liées aux animations.
Version : Module de mise en page en grille CSS niveau 1
Syntaxe JavaScript : object.style.gridGap="50px 100px"

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété.

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