Atributo gap de CSS

Definición y uso

El atributo gap define el tamaño del espacio entre filas y columnas en cuadro flexible, rejilla o diseño de múltiples columnas. Es un atajo para las siguientes propiedades:

Nota:El atributo gap se llamaba anteriormente grid-gap.

Vea también:

Tutorial de CSS:Diseño de rejilla de CSS

Tutorial de CSS:Diseño de cuadro flexible de CSS

Tutorial de CSS:Diseño de múltiples columnas de CSS

Manual de referencia de CSS:Atributo row-gap

Manual de referencia de CSS:Atributo column-gap

Ejemplo

Ejemplo 1

Establecer el espacio entre filas y columnas a 50px:

.grid-container {
  gap: 50px;
}

Intente usted mismo

Ejemplo 2: Diseño de rejilla

Establecer el espacio entre filas a 20px y entre columnas a 50px en diseño de rejilla:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Intente usted mismo

Ejemplo 3: Diseño de cuadro flexible

Establecer el espacio entre filas a 20px y entre columnas a 70px en diseño de cuadro flexible:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Intente usted mismo

Ejemplo 4: Diseño de múltiples columnas

Establecer el espacio entre columnas en diseño de múltiples columnas a 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

Intente usted mismo

Sintaxis de CSS

gap: row-gap column-gap|initial|inherit;
Valor Descripción
row-gap Configurar el tamaño del espacio entre las filas en rejilla o cuadro flexible.
column-gap Configurar el tamaño del espacio entre las columnas en rejilla, cuadro flexible o diseño de múltiples columnas.
initial Establezca este atributo en su valor por defecto. Vea initial.
inherit Hereda este atributo de su elemento padre. Vea inherit.

Detalles técnicos

Valor por defecto: normal normal
Herencia: No
Producción de animación: Se admite. Consulte las propiedades individuales. Vea:Atributos relacionados con la animación.
Versión: Módulo de Alineación de Caja CSS Nivel 3
Sintaxis de JavaScript: object.style.gap="50px 100px"

Compatibilidad del navegador

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

Diseño Chrome IE / Edge Firefox Safari Opera
En la rejilla 66 16 61 12 53
En cuadro flexible 84 84 63 14.1 70
En múltiples columnas 66 16 61 No se admite 53