los row-gapCSS propiedad establece el tamaño de la brecha (canal) entre las filas de la cuadrícula de un elemento.

Sintaxis

/*  values */row-gap: 20px;row-gap: 1em;row-gap: 3vmin;row-gap: 0.5cm;/*  value */row-gap: 10%;/* Global values */row-gap: inherit;row-gap: initial;row-gap: unset;

Valores

Es el ancho del canalón que separa las filas. los valores son relativos a la dimensión del elemento.

Definicion formal

Valor inicial normal
Se aplica a elementos de varias columnas, contenedores flexibles, contenedores de rejilla
Heredado no
Porcentajes referirse a la dimensión correspondiente del área de contenido
Valor calculado como se especifica, con Se hace el cálculo absoluto y normal a cero, excepto en elementos de varias columnas.
Tipo de animación una longitud, porcentaje o calc ();

Sintaxis formal

normal |
where 
 = |

Ejemplos de

Diseño flexible

HTML

<divid="flexbox"><div>div><div>div><div>div><div>div><div>div><div>div>div>

CSS

#flexboxdisplay: flex;flex-wrap: wrap;width: 300px;row-gap: 20px;#flexbox > divborder: 1px solid green;background-color: lime;flex: 1 1 auto;width: 100px;height: 50px;

Resultado

Diseño de cuadrícula

HTML

<divid="grid"><div>div><div>div><div>div>div>

CSS

#griddisplay: grid;height: 200px;grid-template-columns: 200px;grid-template-rows:repeat(3, 1fr);row-gap: 20px;#grid > divborder: 1px solid green;background-color: lime;

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de alineación de cajas CSS, nivel 3
La definición de “espacio entre filas” en esa especificación.		 Borrador de trabajo Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
row-gap 6657 1616 6152 No 5344 12.110.1 6657 6657 6152 4743 1210.3 9.06.0
Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
row-gap 84 84 63 No 70 14,1 84 84 63 No 14,5 No

Las tablas BCD solo se cargan en el navegador

Soporte en diseño de cuadrícula

Las tablas BCD solo se cargan en el navegador

Ver también

  • Propiedades CSS relacionadas: column-gap, gap
  • Guía de diseño de cuadrícula: Conceptos básicos de diseño de cuadrícula – Canalones