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> */
column-gap: 3px;
column-gap: 2.5em;

/* Valeurs de type <percentage> */
column-gap: 3%;

/* 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

Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. Pour les dispositions en colonnes, cette valeur correspond à 1em, sinon elle correspond à 0.

<length>

Une valeur de longueur (<length>) qui définit la taille de l'espace entre les colonnes. Cette valeur (<length>) peut être nulle mais ne doit pas être négative.

<percentage>

Une valeur de pourcentage (<percentage>) qui définit la taille de l'espace entre les colonnes. Cette valeur (<percentage>) peut être nulle mais ne doit pas être négative.

Définition formelle

Syntaxe formelle

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

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

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 ?
</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