Propiedad CSS grid-gap

La propiedad grid-gap define el tamaño del espacio (gutter) entre las filas y columnas de un diseño de cuadrícula. El espacio es el área vacía entre las pistas de la cuadrícula únicamente — nunca agrega espacio en los bordes exteriores, por lo que el propio relleno del contenedor sigue controlando el margen exterior.

grid-gap es una propiedad abreviada de dos propiedades individuales:

grid-row-gap — el tamaño del espacio entre filas.
grid-column-gap — el tamaño del espacio entre columnas.

grid-gap vs. gap

La propiedad estándar gap ha reemplazado a grid-gap. Ambas se comportan de manera idéntica dentro de un contenedor de cuadrícula, pero grid-gap se considera ahora heredada: existe principalmente para navegadores más antiguos que implementaron la versión con prefijo de cuadrícula antes de que el gap sin prefijo fuera estandarizado. Los navegadores modernos aún admiten grid-gap como alias, por lo que las hojas de estilo existentes siguen funcionando.

Para nuevos proyectos, se prefiere gap — funciona en diseños de cuadrícula y de Flexbox, mientras que grid-gap solo se aplicaba a cuadrículas:

/* Legacy (grid only) */
.grid { display: grid; grid-gap: 20px 40px; }

/* Modern, preferred */
.grid { display: grid; gap: 20px 40px; }

Valor inicial	0
Se aplica a	Contenedores de cuadrícula.
Heredada	No.
Animable	Sí. `grid-gap` es animable.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	`object.style.gridGap = "30px 70px";`

Sintaxis

Propiedad CSS grid-gap

grid-gap: <row-gap> <column-gap>;

La propiedad acepta uno o dos valores de longitud:

Un valor establece el espacio de fila y el espacio de columna al mismo tamaño.
Dos valores establecen primero el espacio de fila y luego el espacio de columna (grid-gap: 20px 40px; significa un espacio de 20px entre filas y un espacio de 40px entre columnas).

Cada valor puede ser cualquier longitud no negativa (px, em, rem, etc.) o un porcentaje. Las palabras clave initial e inherit también son válidas.

Ejemplo de la propiedad grid-gap:

Ejemplo de un contenedor de cuadrícula con la propiedad grid-gap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 60px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-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

![Propiedad CSS grid-gap](/uploads/media/default/0001/04/91075707603fef2480969077540f999b813f30aa.png "Cuadrícula con un espacio de 60px entre cada fila y columna" =420x)

Ejemplo de la propiedad grid-gap especificada en porcentajes:

Un espacio en porcentaje se resuelve en relación con las propias dimensiones del contenedor de cuadrícula — el espacio de columna es un porcentaje del ancho del contenedor, y el espacio de fila es un porcentaje de su altura. Los porcentajes son útiles para diseños fluidos, pero hacen que el espacio crezca con el contenedor, por lo que las longitudes fijas suelen ser más predecibles.

Ejemplo de un contenedor de cuadrícula donde el espacio de cuadrícula se define con porcentajes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20%;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-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 »

Ejemplo de la propiedad grid-gap con dos valores:

Cuando se pasan dos valores, el primero establece el espacio de fila y el segundo el espacio de columna. Aquí las filas están separadas por 20px y las columnas por 80px:

Ejemplo de la propiedad CSS grid-gap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20px 80px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-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 »

Valores

Valor	Descripción	Pruébalo
grid-row-gap	Especifica el tamaño del espacio entre las filas en un diseño de cuadrícula. El valor predeterminado es 0. Al usar la sintaxis de dos valores, esto corresponde al primer valor.
grid-column-gap	Especifica el tamaño del espacio entre las columnas en un diseño de cuadrícula. El valor predeterminado es 0. Al usar la sintaxis de dos valores, esto corresponde al segundo valor.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Compatibilidad con navegadores

grid-gap es compatible con todos los navegadores modernos. Dado que es un alias de la propiedad estándar gap, generalmente no se necesitan ambas. Si es necesario dar soporte a implementaciones de cuadrícula muy antiguas, se puede usar grid-gap para ellas y gap para todo lo demás:

.grid {
  display: grid;
  grid-gap: 20px;  /* fallback for legacy browsers */
  gap: 20px;       /* standard property wins where supported */
}

Propiedades relacionadas

grid-row-gap y grid-column-gap — las propiedades individuales que grid-gap combina.
grid — la propiedad abreviada para todo un diseño de cuadrícula.
grid-template-columns — define las columnas entre las que se sitúan los espacios.

Práctica

¿Para qué se usa la propiedad 'grid-gap' en CSS?

Se usa para agregar espacio solo entre filas en un diseño de cuadrícula.Se usa para agregar un borde alrededor de las celdas en un diseño de cuadrícula.Se usa para agregar espacio entre columnas y filas en un diseño de cuadrícula.Se usa para determinar el tamaño de la cuadrícula.Se usa para alinear elementos dentro de una cuadrícula.