Propriété CSS column-gap

Exemple interactif

column-gap: 0;

column-gap: 10%;

column-gap: 1em;

column-gap: 20px;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>Un</div>
      <div>Deux</div>
      <div>Trois</div>
      <div>Quatre</div>
      <div>Cinq</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntaxe

/* Valeur avec un mot-clé */
column-gap: normal;

/* Valeurs de type <length-percentage> */
column-gap: 3px;
column-gap: 2.5em;
column-gap: 3%;
column-gap: calc(3% - 6px);

/* Valeurs globales */
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;

La propriété column-gap est définie par l'une des valeurs listées ci‑dessous.

Valeurs

normal

Pour les dispositions multi-colonnes, résolu à 1em ; sinon 0. C'est la valeur par défaut.

<length>

La taille de l'espace entre les colonnes, en tant que valeur <length> qui n'est pas négative.

<percentage>

La taille de l'espace entre les colonnes, en tant que valeur <percentage> qui n'est pas négative.

Description

La propriété column-gap définit la taille de l'espace entre les colonnes d'un élément. La propriété définit un espacement de longueur fixe entre les éléments d'un conteneur, séparant les boîtes dans l'axe en ligne du conteneur. Les valeurs négatives ne sont pas valides. La valeur par défaut normal est résolue à 1em pour les conteneurs multi-colonnes, et à 0 partout ailleurs.

Les pourcentages sont calculés par rapport à la taille de la boîte de contenu de l'axe en ligne de l'élément conteneur lorsque cette taille est définie, et par rapport à 0 sinon, sauf dans la disposition en grille, pour laquelle les tailles en pourcentage cycliques sont résolues par rapport à zéro pour déterminer les contributions de la taille intrinsèque mais sont résolues par rapport à la boîte de contenu de l'élément lors de la disposition du contenu.

L'espace entre les colonnes peut contenir un séparateur visible en tant qu'élément décoratif. S'il y a une règle entre les colonnes, définie avec la propriété column-rule ou le raccourci rule, elle apparaît au milieu de l'espace, mais n'a aucun effet sur la taille des espaces entre les colonnes.

L'ancienne propriété grid-column-gap est un alias pour column-gap. Elle a été initialement définie dans la disposition en grille pour créer des espaces entre les colonnes de la grille.

La propriété column-gap, ainsi que la propriété row-gap, peut également être définie à l'aide du raccourci gap.

Définition formelle

Syntaxe formelle

column-gap = 
  normal                     |
  <length-percentage [0,∞]>  |
  <line-width>               

<length-percentage> = 
  <length>      |
  <percentage>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

Exemples

Disposition flexible

Dans cet exemple, un conteneur flexible contient six éléments flexibles de deux largeurs différentes (200px et 300px), de sorte que les éléments flexibles ne sont pas disposés en grille. La propriété column-gap sert à ajouter un espace horizontal entre les éléments flexibles adjacents.

HTML

<div class="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Pour créer un conteneur flexible, on définit sa propriété display sur flex. On utilise ensuite la propriété raccourcie flex-flow pour définir flex-direction sur row (la valeur par défaut) et flex-wrap sur wrap, ce qui permet aux éléments flexibles de passer sur de nouvelles lignes si nécessaire. Par défaut, les éléments flexibles s'étirent pour atteindre la hauteur de leur conteneur. En définissant une height, même les éléments flexibles vides ont une hauteur de 100px.

Pour mieux démontrer la propriété column-gap, les éléments flexibles de cet exemple ont deux largeurs différentes. La largeur des éléments flexibles est définie dans les balises <div>. Nous utilisons le composant flex-basis de la propriété raccourcie flex pour donner à tous les éléments flexibles une largeur de 200px. Nous ciblons ensuite chaque troisième élément flexible avec le sélecteur :nth-of-type(3n) pour les élargir à 300px.

La valeur de column-gap est définie à 20px sur le conteneur flexible afin de créer un espace de 20px entre les éléments flexibles adjacents sur chaque ligne.

.flexbox {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  column-gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 200px;
}
div:nth-of-type(3n) {
  flex: 300px;
}

Résultat

Disposition en grille

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Résultat

Disposition multi-colonnes

HTML

<p class="content-box">
  Un texte sur plusieurs colonnes avec une gouttière de 40px paramétrée grâce à
  la propriété `column-gap`. C'est plutôt pas mal comme effet non&nbsp;?
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété row-gap
• La propriété gap
• Les concepts de base des grilles CSS : les gouttières
• Mettre en forme les colonnes
• Le module d'espacements CSS