Propiedad CSS grid-column-gap

La propiedad grid-column-gap establece el tamaño del espacio (el espacio vacío) entre las columnas de un diseño CSS Grid. Controla únicamente el espaciado horizontal entre las pistas de columna — nunca añade espacio en los bordes exteriores del contenedor de cuadrícula.

El valor puede ser una longitud fija (como px, rem o em) o un porcentaje. Cuando se usa un porcentaje, se resuelve respecto al tamaño en línea (el ancho) del contenedor de cuadrícula.

Advertencia

grid-column-gap está obsoleta. Era un nombre antiguo específico de cuadrícula que los navegadores han renombrado desde entonces. En código nuevo, usa la propiedad moderna column-gap, o el atajo gap para establecer los espacios de fila y columna a la vez. Todos los navegadores actuales siguen aceptando grid-column-gap como alias de column-gap, por lo que los diseños existentes siguen funcionando — pero no hay razón para escribirla en hojas de estilo nuevas.

¿Por qué usar un espacio en lugar de márgenes?

Antes de que existieran las propiedades de espacio, los autores creaban separación entre los elementos de la cuadrícula con margin, y luego tenían que cancelar el margen extra que se filtraba en el primer y último elemento. grid-column-gap resuelve esto de forma limpia: el espacio aparece solo entre las pistas de columna, por lo que la cuadrícula permanece alineada con su contenedor en ambos lados. El navegador también mantiene el espacio consistente a medida que las pistas crecen o se reducen, algo que los márgenes no pueden garantizar.

Referencia de la propiedad

Propiedad	Valor
Valor inicial	`normal` (equivalente a `0` en cuadrícula)
Se aplica a	Contenedores Grid
Heredada	No
Animatable	Sí
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	`object.style.gridColumnGap = "30px"`

Sintaxis

grid-column-gap: <length-percentage> | normal | initial | inherit;

<length-percentage> — un valor no negativo en px, em, rem, ch, vw o %. Los valores negativos no son válidos.
normal — el valor predeterminado del navegador, que se resuelve como 0 en un contexto de cuadrícula.
initial — restablece la propiedad a su valor inicial (normal).
inherit — hereda el valor calculado del elemento padre (raramente útil ya que grid-column-gap no se hereda).

Ejemplos

Espacio de longitud fija (px)

El caso más común: un espacio en píxeles fijo que mantiene el mismo tamaño independientemente del ancho del contenedor.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 30px;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Los doce elementos se distribuyen en cuatro columnas; cada columna está separada de la siguiente por 30px, mientras que grid-row-gap: 10px mantiene las filas separadas.

Espacio porcentual (%)

Un valor de porcentaje se resuelve respecto al tamaño en línea (ancho) del contenedor de cuadrícula. Los espacios crecen y se reducen a medida que el contenedor cambia de tamaño.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 20%;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Los espacios porcentuales rara vez son lo que se busca: con tres espacios cada uno al 20%, los espacios solos consumen el 60% del contenedor — dejando solo el 40% para cuatro pistas de columna auto. Las longitudes fijas (px, rem, em) ofrecen espacios mucho más predecibles.

Migración a la sintaxis moderna

El reemplazo es un simple cambio de nombre — el valor es idéntico, solo cambia el nombre de la propiedad:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  /* Deprecated — avoid in new code */
  grid-column-gap: 30px;

  /* Modern equivalent */
  column-gap: 30px;

  /* Or set both axes at once with the gap shorthand */
  /* gap: <row-gap> <column-gap>; */
  gap: 10px 30px;
}

gap: 10px 30px es equivalente a row-gap: 10px; column-gap: 30px;. Pasar un único valor — gap: 30px — lo aplica tanto a filas como a columnas. El atajo gap también funciona dentro de contenedores Flexbox, lo que lo convierte en la opción más versátil.

Cómo interactúan los espacios con las unidades fr

Cuando se combina un espacio con columnas fr, el navegador resta todo el espacio de los espacios del ancho disponible antes de distribuir las fracciones fr. Esto significa que los espacios nunca afectan la proporción entre las pistas:

.grid {
  display: grid;
  /* Three equal columns; gaps come out of available space first */
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px; /* modern equivalent of grid-column-gap: 24px */
}

Si el contenedor tiene 300px de ancho y hay dos espacios de 24px cada uno, los 252px restantes se dividen equitativamente: cada columna tiene 84px. Esta es una de las razones por las que las pistas fr combinadas con un column-gap fijo (o grid-column-gap) producen diseños más predecibles que los espacios basados en porcentajes.

Valores

Valor	Descripción
`<length>`	Un espacio fijo en `px`, `em`, `rem`, etc. No se permiten valores negativos.
`<percentage>`	Un porcentaje del tamaño en línea (ancho) del contenedor de cuadrícula.
`normal`	El valor predeterminado del navegador, que equivale a `0` dentro de una cuadrícula.
`initial`	Restablece al valor inicial (`normal`).
`inherit`	Usa el valor calculado del elemento padre.

Práctica

¿Cuál es el propósito de la propiedad 'column-gap' en el diseño CSS grid?

Establece el tamaño del espacio entre las columnas.Establece el tamaño del espacio entre las filas.Determina el color de las líneas de la cuadrícula.Antes de la introducción de la propiedad 'gap', 'column-gap' se usaba para crear espaciados.Alinea los elementos de la cuadrícula a lo largo del eje de columna.

Propiedades relacionadas

column-gap — el reemplazo moderno de esta propiedad.
gap — atajo para establecer los espacios de fila y columna juntos.
grid-row-gap — la propiedad equivalente para los espacios verticales entre filas.
grid-template-columns — define las pistas de columna entre las que se sitúan los espacios.
grid-template-rows — define las pistas de fila sobre las que actúa grid-row-gap.
grid — el atajo que convierte un elemento en un contenedor de cuadrícula.