Propriété CSS column-gap

La propriété CSS column-gap définit la taille de l'espace (le gouttière) entre les colonnes adjacentes. Elle fonctionne dans trois contextes de mise en page différents : les mises en page multi-colonnes créées avec column-count, les conteneurs flex et les conteneurs grid. Dans Flexbox et CSS Grid, elle constitue la moitié horizontale du raccourci gap, et elle remplace l'ancienne propriété grid-column-gap.

Cette page couvre la syntaxe de la propriété, ses valeurs acceptées, son comportement dans chaque contexte de mise en page, ainsi que les particularités liées aux pourcentages et à la column-rule.

column-gap est l'une des propriétés CSS3.

Ce qu'elle fait

Dans une mise en page multi-colonnes, le navigateur répartit votre contenu en un certain nombre de colonnes. Par défaut, les colonnes sont séparées par un espace normal (1em pour les éléments multi-colonnes). column-gap vous permet de remplacer cette valeur par défaut par n'importe quelle valeur de longueur, afin de resserrer ou d'élargir la gouttière selon votre design.

Elle accepte le mot-clé normal ou une valeur <length> :

normal — la valeur par défaut. Pour les mises en page multi-colonnes, elle se résout à 1em. Pour les conteneurs flex et grid, elle se résout à 0.
<length> — une gouttière fixe telle que 30px, 2em ou 1rem. Les valeurs négatives ne sont pas autorisées.
<percentage> — un espace relatif à la largeur de l'élément.

La propriété prend également en charge les mots-clés standards initial et inherit.

Info

Les préfixes vendeurs (-moz-column-gap, -webkit-column-gap) ne sont plus nécessaires pour les navigateurs modernes. La prise en charge native est disponible dans tous les principaux navigateurs.

Emplacement de la column-rule

Lorsqu'une column-rule est tracée entre les colonnes, elle se place au milieu de l'espace et n'occupe aucun espace propre. Si vous élargissez column-gap, la règle reste centrée avec plus d'espace de chaque côté ; si l'espace est trop réduit, une règle épaisse peut visuellement gêner la lecture du texte.

column-gap vs. gap et grid-column-gap

Dans les conteneurs flex et grid, column-gap est la moitié horizontale du raccourci gap : gap: <row-gap> <column-gap>. L'ancienne propriété grid-column-gap fait la même chose dans grid mais est dépréciée — préférez column-gap.

Valeur initiale	normal
S'applique à	Éléments multi-colonnes, conteneurs flex, conteneurs grid.
Héritage	Non.
Animatable	Oui. La longueur de l'espace entre colonnes est animatable.
Version	CSS3
Syntaxe DOM	object.style.columnGap = "100px";

Syntaxe

Syntaxe de la propriété CSS column-gap

column-gap: length | normal | initial | inherit;

Exemple de la propriété column-gap :

Exemple de la propriété CSS column-gap avec la valeur normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: normal;
      }
    </style>
  </head>
  <body>
    <h2>The column-gap property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Avec column-gap: normal, les quatre colonnes sont séparées par la gouttière par défaut de 1em.

Exemple de la propriété column-gap avec la valeur « length » :

Ici nous définissons une gouttière explicite de 30px, donnant aux colonnes plus d'espace que la valeur par défaut normal.

Exemple de la propriété CSS column-gap avec une valeur de longueur

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Column-gap property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Essayez vous-même »

Utilisation de column-gap avec flex et grid

La même propriété contrôle la gouttière horizontale entre les éléments flex et entre les colonnes de grille. Dans ces contextes, elle s'écrit généralement via le raccourci gap, mais column-gap seul est entièrement pris en charge :

/* Flex container: 24px between items in a row */
.flex {
  display: flex;
  column-gap: 24px;
}

/* Grid: 16px between columns, 8px between rows */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: 8px;
}

Notez que dans flex et grid, la valeur par défaut de column-gap est 0, tandis que dans une mise en page multi-colonnes, la valeur par défaut normal est 1em.

Valeurs en pourcentage

Un espace en pourcentage est calculé par rapport à la largeur de l'élément, et non à la largeur de la colonne :

div {
  column-count: 3;
  column-gap: 5%; /* 5% of the element's width */
}

Comme les pourcentages dépendent de la largeur du conteneur, la gouttière s'agrandit et se rétrécit à mesure que la mise en page est redimensionnée — pratique pour les designs fluides, mais plus difficile à prévoir qu'une valeur fixe en px.

Valeurs

Valeur	Description
normal	La taille d'espace par défaut entre les colonnes.
length	Spécifie la longueur qui définit l'espace entre les colonnes. Peut être exprimée en em, px ou en pourcentages.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Propriétés associées

column-count — définit le nombre de colonnes dans lesquelles le contenu est réparti.
column-width — suggère une largeur idéale pour chaque colonne.
columns — raccourci pour column-width et column-count.
column-rule — trace une ligne dans l'espace entre les colonnes.
grid-gap — le raccourci gap pour définir simultanément les espaces de lignes et de colonnes dans une grille.

Pratique

Quel est le rôle de la propriété column-gap en CSS ?

Définit l'espace entre les colonnes dans une mise en page multi-colonnesModifie la couleur des colonnes dans une mise en page multi-colonnesDéfinit la largeur ou la hauteur d'une colonne spécifique dans une mise en page multi-colonnesDéfinit l'espace entre la bordure et le contenu à l'intérieur d'une colonneContrôle la distribution de l'espace entre les colonnes lorsque de l'espace supplémentaire est ajouté