La propriété column-gap permet de définir l'espace entre les colonnes d'un élément.

La propriété column-gap était initialement définie dans le module de spécification Multi-column Layout (disposition en colonnes). 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. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.

Note : Le module de spécification CSS Grid Layout définissait initialement la propriété grid-column-gap. Cette version préfixée a été remplacée par column-gap. Toutefois, à des fins de compatibilité envers les navigateurs qui ne prendraient pas en charge cette évolution, mieux vaut utiliser les deux versions (voir l'exemple interactif ci-avant).

Syntaxe

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

Syntaxe formelle

normal | <length-percentage>


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

Exemples

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

Disposition en grille

HTML

<div id="grid">
  <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 {
  background-color: lime;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Box Alignment Module Level 3
La définition de 'column-gap' dans cette spécification.
Version de travail Applique cette propriété aux grilles et aux boîtes flexibles (flexbox).
CSS Grid Layout
La définition de 'column-gap' dans cette spécification.
Candidat au statut de recommandation Définition de l'impact de cette propriété sur les dispositions en grille.
CSS Multi-column Layout Module
La définition de 'column-gap' dans cette spécification.
Version de travail Définition initiale.

Valeur initialenormal
Applicabilitémulti-column elements, flex containers, grid containers
Héritéenon
Pourcentagesfait référence à la dimension correspondante de la zone de contenu
Médiavisuel
Valeur calculéeas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

Prise en charge pour les dispositions flexibles

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple ? ?63 Non ? Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Non63 ? Non ?

Prise en charge pour les dispositions en grille

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

66

571

291 2

16

161

61

521

401 3

Non

53

441

281 4

10.11
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

66

571

291 5

66

571

291 2

Non

61

521

401 3

53

441

10.316.01

1. Supported as grid-gap.

2. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

3. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 28: this feature is behind the Enable experimental Web Platform features preference.

5. From version 29: this feature is behind the Enable experimental Web Platform features preference.

Prise en charge pour les dispositions en colonnes

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

50

Oui -webkit-

12

12 -webkit-

52

1.5 -moz- 1

10

37

15 -webkit-

11.1 — 15

10

3 -webkit-

<percentage> values661661 Non53 Non
calc() values661661 Non53 Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

50

Oui -webkit-

50

Oui -webkit-

Non

52

4 -moz-

37

15 -webkit-

11.1 — 14

10

3 -webkit-

5.0

Oui -webkit-

<percentage> values6666 Non6153 Non Non
calc() values6666 Non6153 Non Non

1. Before Firefox 3, the default value for the normal keyword was 0 and not 1em.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mrstork, fscholz, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,