Propiedad CSS grid-row-gap
La propiedad CSS grid-row-gap define el tamaño del espacio entre las filas de un contenedor de cuadrícula. El ancho del espacio se puede especificar utilizando un valor de longitud.
Se puede especificar en píxeles (px) o porcentajes (%).
INFO
La propiedad row-gap es la abreviatura moderna que establece tanto grid-row-gap como grid-column-gap. Aunque se prefiere row-gap, grid-row-gap sigue siendo válido para especificar explícitamente el espaciado entre filas.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Contenedores de cuadrícula. |
| Heredable | No. |
| Animable | Sí. El espacio entre las filas es animable. |
| Versión | CSS Grid Layout Module Level 1 |
| Sintaxis DOM | object.style.gridRowGap = "30px"; |
Sintaxis
Sintaxis de CSS grid-row-gap
grid-row-gap: normal | length;Ejemplo de la propiedad grid-row-gap:
Ejemplo de código CSS grid-row-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: 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>Resultado
Aquí, el espacio entre filas se especifica como 0. En el siguiente ejemplo, el espacio entre filas es de 40px.
Ejemplo de la propiedad grid-row-gap especificada en píxeles:
Otro ejemplo de código CSS grid-row-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>Ejemplo de la propiedad grid-row-gap especificada en porcentaje:
Ejemplo de la propiedad grid-row-gap especificada en porcentaje:
<!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>Valores
| Valor | Descripción | Ejecutar |
|---|---|---|
| normal | Utiliza el espaciado predeterminado del navegador entre las filas. Este es el valor predeterminado de esta propiedad. | |
| length | El espacio entre filas se especifica en px o porcentajes. No se permiten valores negativos. El valor predeterminado es 0. | Ejecutar » |
| initial | Hace que la propiedad utilice su valor predeterminado. | |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es el propósito de la propiedad 'grid-row-gap' en CSS?