column-gap (grid-column-gap)
============================

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

Exemple interactif
------------------

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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*