column-gap
Définit l’espace entre les colonnes d’un conteneur flex, grid ou multi-colonnes.
- Valeur initiale
normal- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- conteneurs flex, grid et multi-colonnes
- JavaScript
element.style.columnGap = "24px"
Exemple
#.article {
columns: 2;
column-gap: 32px;
}<div class="article stage">Texte divisé en deux colonnes comme dans un journal. L’espace entre les colonnes se règle avec column-gap. Les paragraphes plus longs passent tout seuls de la première colonne à la deuxième, sans aucun code supplémentaire.</div>Définition et utilisation
#La propriété column-gap définit l’espace entre les colonnes, c’est-à-dire à l’horizontale dans le sens d’écriture habituel. En Flexbox, c’est l’espace entre les éléments d’une même ligne.
Elle fonctionne aussi dans une mise en page multi-colonnes (columns), où la valeur par défaut normal signifie un espace égal à 1em. En Flexbox et en Grid, normal signifie zéro.
L’ancien nom grid-column-gap est toujours pris en charge comme alias, mais le nouveau code devrait utiliser column-gap.
Syntaxe
#column-gap: normal | <longueur> | <pourcentage>;Valeurs
#Valeurs en pratique
#normal
.demo { column-gap: normal; }10px
.demo { column-gap: 10px; }40px
.demo { column-gap: 40px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Dans les textes multi-colonnes, donnez aux colonnes un espace net, au moins 2em, pour que l’œil ne glisse pas vers la colonne voisine.
- Pour des espaces distincts sur les deux axes, utilisez le raccourci
gap: <lignes> <colonnes>.
Entrées associées
#- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
- row-gapDéfinit l’espace entre les lignes d’un conteneur flex ou grid.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- columnsRépartit le contenu d’un élément en colonnes comme dans un journal. Raccourci pour column-width et column-count.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.