column-gap (grid-column-gap)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété column-gap permet de définir la taille des espaces (gouttières) entre les colonnes d'un élément.

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>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

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

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

La propriété column-gap était initialement définie dans le module de spécification Colonnes CSS. Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification Box Alignment (alignement des boîtes en CSS). Cette propriété peut être utilisée pour les dispositions multi-colonnes, les dispositions flexibles et les dispositions en grille.

Syntaxe

css

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

/* Valeurs de longueur */
/* Type <length>       */
column-gap: 3px;
column-gap: 2.5em;

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

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

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 (type <length>) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
<percentage>: Une valeur de pourcentage (type <percentage>) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.

Définition formelle

Valeur initiale	`normal`
Applicabilité	multi-column elements, flex containers, grid containers
Héritée	non
Pourcentages	fait référence à la dimension correspondante de la zone de contenu
Valeur calculée	as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Type d'animation	une longueur, pourcentage ou calc() ;

Syntaxe formelle

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

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

Exemples

Disposition flexible

HTML

html

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css

#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

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

Résultat

Disposition en grille

HTML

html

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

CSS

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

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

css

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

Résultat

Spécifications

Specification
CSS Box Alignment Module Level 3 # column-row-gap
CSS Grid Layout Module Level 2 # gutters
CSS Multi-column Layout Module Level 1 # column-gap

Compatibilité des navigateurs

Voir aussi

Les autres propriétés relatives aux gouttières : row-gap, gap
Guide sur les grilles : Les concepts de base des grilles CSS : les gouttières
Guide sur la disposition multi-colonnes : Mettre en forme les colonnes