Propriété column-gap

La propriété column-gap définit l'espace entre les colonnes dans un texte multicolonne, ainsi que l'espace entre les colonnes dans une grille. Les valeurs de la propriété sont toutes les unités de taille ou le mot-clé normal (par défaut), où le navigateur choisit lui-même l'espace optimal entre les colonnes.

Syntaxe

sélecteur {
	column-gap: valeur;
}

Exemple

Dans cet exemple, le nombre de colonnes column-count (3 unités) et l'espace entre elles column-gap sont définis à 50px. Et la largeur des colonnes sera automatiquement ajustée pour satisfaire à ces conditions (nombre de colonnes et espace entre elles) :

<div id="elem">
	some long text
</div>

#elem {
	column-count: 3;
	column-gap: 50px;
	text-align: justify;
}

Exemple . Valeur normal

Dans cet exemple, la largeur de colonne column-width est définie à 150px, leur nombre column-count est à la valeur auto, et l'espace column-gap entre elles - à la valeur normal. Ainsi, le navigateur choisit lui-même le nombre nécessaire de colonnes et l'espace entre elles (mais leur largeur sera de 150px) :

<div id="elem">
	some long text
</div>

#elem {
	column-gap: normal;
	column-count: auto;
	column-width: 150px;
	text-align: justify;
}

Exemple

Définissons l'espace entre les colonnes dans une grille :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	column-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}

Exemple

Et maintenant, définissons l'espace entre les colonnes en % :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	column-gap: 5%;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}

Voir aussi

la propriété column-width,
qui définit la largeur d'une colonne
la propriété column-count,
qui définit le nombre de colonnes
la propriété gap,
qui définit l'espace entre les éléments dans une grille
la propriété row-gap,
qui définit l'espace entre les rangées dans une grille