Gap, column-gap et row-gap.

gap
column-gap
row-gap

Résumé des caractéristiques de la propriété gap

Description rapide
Définit les espacements entre les lignes et entre les colonnes dans le contexte d'une grille, d'un flex-box, ou d'une mise en page sur plusieurs colonnes)
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
normal
Pourcentages
Calculés par rapport aux dimensions de l'élément.
Valeur initiale
normal
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété gap passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Alignement des blocs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de gap.

Gap property - Syntax diagramSyntax diagram of the gap CSS property. See stylescss.free.fr for details. normal normal length length % % {1,2} {1,2}gap:;gap:;
column-gap property - Syntax diagramSyntax diagram of the column-gap CSS property. See stylescss.free.fr for details. normal normal length length % %column-gap:;column-gap:;
row-gap property - Syntax diagramSyntax diagram of the row-gap CSS property. See stylescss.free.fr for details. normal normal length length % %row-gap:;row-gap:;
Schéma syntaxique des propriétés gap, column-gap et row-gap
Les liens du schéma donnent accès à plus de détails.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

  • length est une valeur numérique suivie d'une des unités de dimension.
  • % est un pourcentage dont l'évaluation correspond à une dimension.

Description de la propriété gap et dérivées.

gap définit l'espacement entre les lignes et entre les colonnes dans le contexte d'une grille, d'un flex-box ou d'une mise en page en colonnes. Les tableaux ne sont pas concernés par cette propriété. gap est une propriété résumée qui est équivalente aux deux propriétés suivantes :

  • row-gap : espacement vertical, entre les lignes.
  • column-gap : espacement horizontal, entre les colonnes.

Notez aussi les propriétés synonymes, initialement définies pour les grilles, mais qui peuvent maintenant être oubliées au profit des propriétés plus générales :

  • grid-row-gap propriété équivalente à row-gap.
  • grid-column-gap équivalente à column-gap.
  • grid-gap équivalente à gap.

Cas d'une grille.

Dans le cas d'une grille, column-gap et row-gap définissent les espacements horizontaux et verticaux entre les cellules de la grille.

Pour une présentation plus détaillée des grilles, reportez-vous à la page Présentation générale des grilles.

Cas d'un flex-box.

Les propriétés column-gap et row-gap définissent les espacements horizontaux et verticaux entre les éléments du flex-box.

Pour une présentation plus détaillée des flex-box, reportez-vous à la page sur les flex-box.

Cas d'une mise en page multi-colonnes.

L'espace entre deux colonnes de texte prend le nom de "gouttière". gap définit donc la largeur de la gouttière. row-gap est sans effet dans ce cas. Si une ligne de séparation est tracée entre les colonnes (voir column-rule) son épaisseur est prise sur celle définie par gap, la largeur de la gouttière ne sera donc pas augmentée par la présence d'une ligne.

Pour une présentation générale des mises en page en colonnes, reportez-vous aux explications sur la page Tutoriel sur les mises en page multi-colonnes.

Valeurs pour gap.

  • gap: normal;

    Définit les espacements à 0 s'il s'agit d'une grille ou d'un conteneur flex, et à 1em s'il s'agit d'une mise en page en colonnes.

  • gap: 5px 8px; lig col

    La première valeur indique l'espacement entre les lignes, la deuxième valeur est l'espacement entre les colonnes. Ce sont deux valeurs positives ou nulles, suivie d'une des unités de dimension.
    Si une seule valeur est indiquée, elle s'applique aux deux espacements.

    Les pourcentages sont calculés par rapport à la hauteur de l'élément pour la première valeur et par rapport à la largeur de l'élément pour la deuxième valeur.

  • row-gap: 5px; column-gap: 10px;

    Les propriétés détaillées peuvent être utilisées si on ne souhaite définir que l'un des espacements horizontal ou vertical. Par exemple, dans le cas d'une mise en page en colonnes, on utilisera plutôt column-gap.

  • gap: initial; (normal) gap: inherit; gap: revert; gap: revertLayer; gap: unset;

    Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Animation de la propriété gap.

Comme la plupart des propriétés qui acceptent des valeurs numériques, gap peut être animée de façon progressive. Le résultat visuel n'est pas particulièrement intéressant. Voici ce que cela donne sur une mise en page en colonnes.

Lorsqu'un texte est mis en page sur plusieurs colonnes, l'espace entre les colonnes prend le nom de "gouttière" (terme utilisé par les imprimeurs et typographes). En CSS, la largeur de la gouttière est déterminée par la propriété gap.
Pour cette démonstration, cette propriété a été animée. Vous pouvez consulter le code de l'animation et les règles appliquées à cet élément en cliquant sur le bouton ci-dessus.

Manipulation de la propriété gap par programme.

Modifier les espacements avec gap et Javascript.

Deux syntaxes Javascript permettent de modifier la valeur d'une propriété. L'exemple applique une valeur de 5 pixels à la propriété gap.

Javascript
let el = document.getElementById('id'); el.style['gap'] = '5px'; // ou let el = document.getElementById('id'); el.style.gap = '5px';

Relire les espacements en Javascript.

Le code ci-dessous lit la valeur de la propriété gap qui a été affectée dans le code HTML, avec l'attribut style. Si la valeur a été affectée via un sélecteur CSS, elle ne sera pas renvoyée. Ce code retourne la valeur de gap dans la même unité que celle utilisée pour la définir.

Javascript
let el = document.getElementById('id'); let value = el.style['gap']; // ou let el = document.getElementById('id'); let value = el.style.gap;

Lire la valeur calculée de gap en Javascript.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives, et de la résolution de la cascade des héritages. Ce sera, dans l'ordre des priorités, la valeur affectée via l'attribut style, la valeur affectée via un sélecteur CSS ou une valeur héritée, et, en dernier recours, la valeur initiale de la propriété (normal dans le cas de gap).

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('gap');

Modifier la valeur des espacements avec JQuery.

JQuery

$('#id').css('gap', '5px');

Lire la valeur calculée de la propriété gap avec JQuery.

Comme en Javascript, la valeur est renvoyée en pixels, même si elle a été définie dans une autre unité.

JQuery
let value = $('#id').css('gap');

Autres exemples de code.

Vous trouverez d'autres exemples de code en Javascript et JQuery sur la page Javascript et CSS, toujours pour manipuler le CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété gap et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de gap. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages mais que toutes les autres unités sont converties en pixels.

Simulateur avec la propriété gap.

L'effet de gap est présenté sur une grille, sur un flex-box et sur une mise en page en colonnes.
On voit que la valeur par défaut normal n'est pas la même dans le cas de figure. Pour une mise en page en colonnes, normal vaut à peu près 1em, tandis que normal vaut zéro dans le cas d'une grille ou d'un flex-box.

Attention ! Dans le cas d'un flex-box, la propriété justify-content peut ajouter des espacements supplémentaires pour réaliser la justification des éléments, particulièrement avec les valeurs space-around, space-between et space-evenly.

gap :
Grille
1
2
3
4
5
6
7
8
9
10
11
12
Flex-box
1
2
3
4
5
6
7
8
9
10
Colonnes
La mise en page sous forme de plusieurs colonnes est nécessaire lorsque les lignes de texte sont longues par rapport à la taille des caractères. L'œil a alors du mal à suivre la ligne d'un bout à l'autre, ce qui occasionne une fatigue oculaire plus importante. Cette disposition est la mise en page habituellement retenue par les journaux. L'espace entre les colonnes doit être suffisant pour que ces dernières soient clairement identifiables au premier coup d'œil. La justification du texte (comme dans cet exemple) améliore également la délimitation visuelle des colonnes.

Prise en charge de gap par les navigateurs.

La prise en charge des propriétés row-gap, column-gap et de la propriété raccourcie gap est globalement bonne.

Colonne 1
Prise en charge des propriétés column-gap, row-gap et de la propriété résumée gap, dans le contexte d'un conteneur grille.
Colonne 2
Prise en charge des propriétés column-gap, row-gap et de la propriété résumée gap, dans le contexte d'un conteneur flex-box.
Colonne 3
Prise en charge des propriétés column-gap, row-gap et de la propriété résumée gap, dans le contexte d'un conteneur multi-colonnes.
1
Propriété
gap
(grille)
2
Propriété
gap
(flex-box)
3
Propriété
gap
(colonnes)
Estimation de la prise en charge globale.
95%
96%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Historique de la propriété gap.

Autres propriétés de positionnement, d'alignement ou de dimensionnement des blocs.

Toutes ces propriétés sont maintenant regroupées dans la spécification "module CSS - Alignement des blocs" (CSS Box Alignment Module).

Propriétés :

align-content
Gère la disposition des éléments dans un flex-box ou une grille, suivant l'axe secondaire.
align-items
Disposition verticale des éléments dans un flex-box ou une grille.
align-self
Position verticale de l'un des éléments dans un flex-box ou une grille.
column-gap
Définit l'espacement entre les colonnes.
grid-column-gap
Spécifie l'espacement entre les colonnes dans une grille.
grid-gap
Ajuste l'espacement des lignes et des colonnes dans le contexte d'une grille.
grid-row-gap
Spécifie l'espacement entre les lignes dans une grille.
justify-content
Définit le positionnement suivant l'axe principal dans un flex-box ou une grille.
justify-items
Gère l'alignement horizontal des éléments dans un conteneur grille.
justify-self
Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.
place-content
Disposition des éléments dans un flex-box ou une grille.
place-items
Défini le placement des éléments dans leur cellule (dans le contexte d'une grille).
place-self
Définit l'alignement d'un élément aussi bien dans la direction inline que dans la direction block.
row-gap
Définit l'espace entre les lignes d'une grille.