Atributo CSS grid-gap

Definición y uso

El atributo grid-gap define el tamaño del espacio entre filas y columnas en el diseño de rejilla y es un atajo para los siguientes atributos:

Nota:Este atributo ha sido renombrado en CSS3 como gap.

Vea también:

Tutorial de CSS:Diseño de rejilla CSS

Manual de referencia de CSS:Atributo grip-row-gap

Manual de referencia de CSS:Atributo grip-column-gap

Ejemplo

Ejemplo 1

Establecer la abreviatura entre filas y columnas en 50 píxeles:

.grid-container {
  grid-gap: 50px;
}

Pruebe usted mismo

Ejemplo 2

Establecer el espacio entre filas en 20 píxeles y el espacio entre columnas en 50 píxeles:

.grid-container {
  grid-gap: 20px 50px;
}

Pruebe usted mismo

Sintaxis de CSS

grid-gap: grid-row-gap grid-column-gap;

Valor del atributo

Valor Descripción
grid-row-gap Establecer el tamaño del espacio entre filas en el diseño de rejilla. El valor predeterminado es 0.
grid-column-gap Establecer el tamaño del espacio entre columnas. El valor predeterminado es 0.

Detalles técnicos

Valor predeterminado: 0 0
Herencia: No
Producción de animación: Admite. Consulte:Propiedades relacionadas con la animación.
Versión: Módulo de Layout de Grid CSS Nivel 1
Sintaxis de JavaScript: object.style.gridGap="50px 100px"

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que completamente admite esta propiedad.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44