Propiedad column-gap

La propiedad column-gap establece la distancia entre columnas en texto multicolumna, y también la distancia entre columnas en grid. Los valores de la propiedad son cualquier unidad de medida o la palabra clave normal (por defecto), en cuyo caso el navegador selecciona automáticamente la distancia óptima entre columnas.

Sintaxis

selector {
	column-gap: valor;
}

Ejemplo

En este ejemplo se especifica el número de columnas column-count (3 unidades) y el espacio entre ellas column-gap de 50px. Y el ancho de las columnas se ajustará automáticamente para cumplir con estas condiciones (número de columnas y distancia entre ellas):

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

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

Ejemplo . Valor normal

En este ejemplo se especifica el ancho de columna column-width de 150px, su número column-count está establecido en auto, y el espacio column-gap entre ellas - en el valor normal. Así, el navegador mismo seleccionará el número necesario de columnas y el espacio entre ellas (pero su ancho será de 150px):

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

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

Ejemplo

Establezcamos la distancia entre columnas en grid:

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

Ejemplo

Y ahora establezcamos la distancia entre columnas 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;
}

Véase también

propiedad column-width,
que establece el ancho de columna
propiedad column-count,
que establece el número de columnas
propiedad gap,
que establece la distancia entre elementos en grid
propiedad row-gap,
que establece la distancia entre filas en grid