Propiedad CSS grid-row-gap
Aprende cómo CSS grid-row-gap define el espacio entre filas de una cuadrícula, con sintaxis, valores y ejemplos del alias moderno row-gap.
La propiedad CSS grid-row-gap define el tamaño del espacio (la canaleta) entre las filas de un contenedor de cuadrícula. Inserta espacio entre filas — nunca antes de la primera fila ni después de la última — por lo que no genera márgenes exteriores inesperados.
Esta propiedad solo afecta a los elementos cuyo display sea grid o inline-grid. No tiene efecto en los diseños Flexbox o multicolumna; en esos casos, utiliza la propiedad estándar column-gap o la abreviatura universal gap.
grid-row-gap es ahora un alias de la propiedad estándar row-gap, que funciona en cuadrículas, Flexbox y diseños multicolumna. Los navegadores los tratan de forma idéntica dentro de un contexto de cuadrícula. Prefiere row-gap (o la abreviatura grid-gap que establece ambos ejes a la vez) en el código nuevo. grid-row-gap sigue siendo válido y se mantiene por compatibilidad con versiones anteriores.
Referencia rápida
| Valor inicial | normal (equivale a 0 en grid) |
| Se aplica a | Contenedores de cuadrícula |
| Heredable | No |
| Animable | Sí |
| Especificación | CSS Grid Layout Module Level 1 |
| Sintaxis DOM | element.style.gridRowGap = "30px" |
Cuándo usarla
Utiliza grid-row-gap cuando desees un espaciado vertical predecible entre las filas de la cuadrícula sin depender de márgenes en los elementos individuales. Los márgenes entre elementos de cuadrícula son incómodos: colapsan de forma irregular, añaden espacio en los bordes y resultan difíciles de actualizar globalmente. Un espacio entre filas, en cambio, se sitúa únicamente entre las filas y mantiene los bordes exteriores de la cuadrícula al ras, lo que facilita el razonamiento sobre el espaciado.
Combínalo con grid-column-gap para el espaciado horizontal, o reemplaza ambos con la abreviatura grid-gap cuando desees definir las canaletas de filas y columnas al mismo tiempo.
Sintaxis
/* keyword */
grid-row-gap: normal;
/* absolute length */
grid-row-gap: 20px;
grid-row-gap: 1.5em;
/* percentage of the container's block size */
grid-row-gap: 10%;
/* global values */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;Valores
| Valor | Descripción |
|---|---|
normal | El espaciado predeterminado del navegador. Se resuelve a 0 dentro de un contenedor de cuadrícula. |
<length> | Un valor de longitud CSS no negativo (px, em, rem, vw, etc.). |
<percentage> | Un porcentaje no negativo resuelto respecto al eje de bloque (altura) del contenedor de cuadrícula. |
inherit | Toma el valor calculado del elemento padre. |
initial | Restablece la propiedad a su valor inicial (normal). |
unset | Actúa como inherit si la propiedad es heredable; de lo contrario, como initial. |
Ejemplos
Sin espacio entre filas (valor por defecto)
Con grid-row-gap: 0, las filas se sitúan directamente una junto a la otra sin canaleta vertical. Solo grid-column-gap separa los elementos horizontalmente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
grid-row-gap: 0;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-row-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 class="box8">8</div>
</div>
</body>
</html>![Ejemplo de CSS grid-row-gap sin espacio entre filas](/uploads/media/default/0001/04/4123ae945c3b6e7b25f0fc5911ae459f604c3c1c.png "Ejemplo de CSS grid-row-gap sin espacio entre filas" =420x)
Espacio fijo en píxeles
Establecer grid-row-gap: 40px añade una canaleta de 40 píxeles entre cada par de filas. El espacio entre columnas permanece independiente y se controla por separado con grid-column-gap.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
grid-row-gap: 40px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-row-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>Espacio en porcentaje
Un valor porcentual se resuelve respecto al tamaño de bloque (altura) del contenedor de cuadrícula. Esto significa que la canaleta crece proporcionalmente cuando el contenedor es más alto, lo que puede ser útil para diseños fluidos sensibles a la relación de aspecto. Para la mayoría de los diseños de contenido, un valor fijo en px o rem resulta más predecible.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 15%;
grid-column-gap: 3%;
background-color: grey;
padding: 40px;
}
.grid-container > div {
background-color: white;
text-align: center;
padding: 25px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>Migración al moderno row-gap
La especificación de CSS Grid se alineó posteriormente con las convenciones de espaciado de multicolumna y Flexbox, renombrando grid-row-gap a row-gap. Ambas son intercambiables en un contexto de cuadrícula, pero row-gap también funciona en contenedores Flexbox y multicolumna. La migración consiste en un simple cambio de nombre:
/* Legacy — still valid, but prefer row-gap in new code */
grid-row-gap: 20px;
/* Modern equivalent */
row-gap: 20px;
/* Shorthand: sets row-gap and column-gap at once */
gap: 20px 10px; /* row-gap: 20px; column-gap: 10px */
gap: 20px; /* both row-gap and column-gap: 20px */Todos los navegadores principales han soportado row-gap para grid desde principios de 2020, por lo que no existe ninguna razón práctica de compatibilidad para seguir usando el nombre grid-row-gap en proyectos nuevos.
Problemas comunes
- Espacios porcentuales y altura intrínseca. Cuando el contenedor de cuadrícula no tiene un
heightexplícito, el navegador no puede resolver un espacio de fila porcentual hasta que conoce la altura del contenedor, que a su vez depende del contenido. Esta dependencia circular puede provocar que el espacio se resuelva a0. Usapxorema menos que el contenedor tenga una altura fija. - No se permiten valores negativos. A diferencia de los márgenes,
grid-row-gapsolo acepta valores cero o positivos. Intentar establecer un espacio negativo es inválido y la declaración se ignora. - El espacio no añade margen exterior.
grid-row-gapañade espacio solo entre filas. Si necesitas relleno alrededor de toda la cuadrícula, usa la propiedadpaddingdel contenedor. - Los elementos que abarcan varias filas no se ven afectados. Un elemento que abarca múltiples filas con
grid-row: span 2sigue beneficiándose del espacio entre esas filas como parte de su espacio asignado.
Propiedades relacionadas
grid-column-gap— define el espacio entre columnas de la cuadrícula.grid-gap— abreviatura que establece tantogrid-row-gapcomogrid-column-gapa la vez.column-gap— la propiedad moderna e independiente del tipo de diseño para el espaciado entre columnas.grid-template-columns— define las pistas de columna entre las que se sitúa el espacio.grid-template-rows— define las pistas de fila separadas por este espacio.grid-auto-rows— controla el tamaño de las filas creadas implícitamente.