Atributo CSS row-gap

Definición y uso

El atributo row-gap especifica el espacio entre las filas en el diseño del cuadro flexible o de la cuadrícula.

El atributo row-gap se llamaba anteriormente grid-row-gap.

Véase también:

Tutorial CSS:Diseño de cuadrícula CSS

Tutorial CSS:Diseño de cuadro flexible CSS

Manual de referencia CSS:Atributo gap

Manual de referencia CSS:Atributo column-gap

Ejemplo

Ejemplo 1

Especifique un espacio de 50 píxeles entre las filas de la cuadrícula:

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

Pruebe usted mismo

Ejemplo 2: Diseño del cuadro flexible

Establezca el espacio entre las líneas en el diseño del cuadro flexible en 70px:

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

Pruebe usted mismo

Sintaxis de CSS

row-gap: longitud|normal|initial|inherit;
Valor Descripción
longitud Establezca la longitud específica o el valor por ciento del espacio entre las líneas.
normal Valor predeterminado. Define el espacio normal entre las líneas.
initial Establezca esta propiedad en su valor predeterminado. Véase initial.
inherit Hereda esta propiedad de su elemento padre. Véase inherit.

Detalles técnicos

Valor predeterminado: normal
Herencia: no
Producción de animación: Admite. Consulte las propiedades individuales. Véase:Propiedades relacionadas con la animación.
Versión: Módulo de Alineación de Caja CSS Nivel 3
Sintaxis de JavaScript: object.style.rowGap="50px"

Compatibilidad del navegador

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

disposición Chrome IE / Edge Firefox Safari Opera
en la cuadrícula 66 16 61 12 53
en el cuadro flexible 84 84 63 14.1 70