Propiedad CSS column-gap

La propiedad CSS column-gap establece el tamaño del espacio (el canal) entre columnas adyacentes. Funciona en tres contextos de diseño distintos: diseños de columnas múltiples creados con column-count, contenedores flex y contenedores grid. En Flexbox y CSS Grid es la mitad abreviada horizontal de gap, y reemplaza la antigua propiedad grid-column-gap.

Esta página cubre la sintaxis de la propiedad, sus valores aceptados, cómo se comporta en cada contexto de diseño y los aspectos a tener en cuenta con los porcentajes y el column-rule.

column-gap es una de las propiedades CSS3.

Qué hace

En un diseño de columnas múltiples, el navegador distribuye el contenido en un número de columnas. De forma predeterminada las columnas están separadas por un espacio normal (1em para elementos de columnas múltiples). column-gap permite reemplazar ese valor predeterminado con cualquier valor de longitud, para que puedas ajustar o ampliar el canal según tu diseño.

Acepta la palabra clave normal o un valor <length>:

normal — el valor predeterminado. Para diseños de columnas múltiples se resuelve como 1em. Para contenedores flex y grid se resuelve como 0.
<length> — un canal fijo como 30px, 2em o 1rem. No se permiten valores negativos.
<percentage> — un espacio relativo al ancho del elemento.

La propiedad también admite las palabras clave estándar initial e inherit.

Información

Los prefijos de proveedor (-moz-column-gap, -webkit-column-gap) ya no son necesarios para los navegadores modernos. El soporte nativo está disponible en todos los navegadores principales.

Dónde se ubica el column-rule

Cuando se dibuja un column-rule entre columnas, se sitúa en el centro del espacio y no ocupa espacio propio. Si amplías column-gap, la línea permanece centrada con más margen a cada lado; si el espacio es demasiado pequeño, una línea gruesa puede sobrecargar visualmente el texto.

column-gap vs. gap y grid-column-gap

En contenedores flex y grid, column-gap es la mitad horizontal del atajo gap: gap: <row-gap> <column-gap>. La antigua propiedad grid-column-gap cumple la misma función en grid pero está obsoleta — se prefiere column-gap.

Valor inicial	normal
Se aplica a	Elementos de columnas múltiples, contenedores flex, contenedores grid.
Se hereda	No.
Animable	Sí. La longitud del espacio entre columnas es animable.
Versión	CSS3
Sintaxis DOM	object.style.columnGap = "100px";

Sintaxis

Sintaxis de la propiedad CSS column-gap

column-gap: length | normal | initial | inherit;

Ejemplo de la propiedad column-gap:

Ejemplo de la propiedad CSS column-gap con el valor normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: normal;
      }
    </style>
  </head>
  <body>
    <h2>The column-gap property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Con column-gap: normal, las cuatro columnas están separadas por el canal predeterminado de 1em.

Ejemplo de la propiedad column-gap con el valor "length":

Aquí establecemos un canal explícito de 30px, lo que proporciona a las columnas más separación que el valor predeterminado normal.

Ejemplo de la propiedad CSS column-gap con el valor length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Column-gap property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Uso de column-gap en flex y grid

La misma propiedad controla el canal horizontal entre elementos flex y entre columnas de grid. En estos contextos suele escribirse mediante el atajo gap, pero column-gap por sí sola también está totalmente soportada:

/* Flex container: 24px between items in a row */
.flex {
  display: flex;
  column-gap: 24px;
}

/* Grid: 16px between columns, 8px between rows */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: 8px;
}

Ten en cuenta que en flex y grid el valor predeterminado de column-gap es 0, mientras que en un diseño de columnas múltiples el valor predeterminado de normal es 1em.

Valores de porcentaje

Un espacio en porcentaje se resuelve respecto al ancho del elemento, no al ancho de la columna:

div {
  column-count: 3;
  column-gap: 5%; /* 5% of the element's width */
}

Dado que los porcentajes dependen del ancho del contenedor, el canal crece y se reduce cuando el diseño cambia de tamaño — útil para diseños fluidos, pero más difícil de predecir que un valor fijo en px.

Valores

Valor	Descripción
normal	El tamaño de espacio predeterminado entre columnas.
length	Especifica la longitud que establece el espacio entre columnas. Puede especificarse en em, px o porcentajes.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

column-count — establece en cuántas columnas se divide el contenido.
column-width — sugiere un ancho ideal para cada columna.
columns — atajo para column-width y column-count.
column-rule — dibuja una línea dentro del espacio entre columnas.
grid-gap — el atajo gap para establecer los espacios de fila y columna juntos en grid.

Práctica

¿Cuál es la función de la propiedad column-gap en CSS?

Establece el espacio entre las columnas en un diseño de columnas múltiplesCambia el color de las columnas en un diseño de columnas múltiplesDefine el ancho o alto de una columna específica en un diseño de columnas múltiplesEstablece el espacio entre el borde y el contenido dentro de una columnaControla la distribución del espacio entre columnas cuando se añade espacio adicional