Grid-row-gap en CSS: Cómo controlar el espacio entre filas

Casi podría asegurar que, si trabajas en diseño web, alguna vez te has enfrentado al reto de organizar elementos en una página web para que tengan una distribución armónica y cómoda de leer. En estas situaciones, una de las herramientas que más nos pueden ayudar es CSS Grid, pues su versatilidad ha revolucionado la forma en que diseñamos layouts. Entre sus opciones, grid-row-gap juega un papel esencial para controlar el espacio entre filas, por lo que, en este artículo, te contaré qué es y cómo puedes sacar provecho de esta propiedad.

¿Qué es grid-row-gap en CSS?

En palabras sencillas, grid-row-gap es la propiedad de CSS que define la distancia entre las filas de un contenedor de cuadrícula. En ese sentido, es la herramienta que necesitas si alguna vez has sentido que tus filas están demasiado juntas o demasiado separadas, ya que te permite ajustar ese espacio y lograr un diseño más equilibrado.

También es cierto que, en las versiones más recientes de CSS, esta propiedad se ha empezado a reemplazar por row-gap. Sin embargo, sigue siendo muy conocida y utilizada por muchos desarrolladores, debido a su compatibilidad con versiones anteriores de navegadores que no admiten la propiedad row-gap. Por esto, vale la pena entenderla y aprender a utilizarla.

¿Para qué sirve grid-row-gap?

Quiero que imagines que estás diseñando una galería de fotos. Al usar CSS Grid para organizar los elementos de la galería, es muy probable que quieras que las filas tengan un espacio uniforme para mejorar la legibilidad y el aspecto visual. En este tipo de casos, grid-row-gap te permite:

1. Controlar el espacio vertical entre las filas sin afectar las columnas.
2. Crear diseños más limpios y organizados.
3. Ajustar rápidamente el espaciado para adaptarlo a los diferentes tipos de dispositivos.

Básicamente, esta propiedad es tu herramienta ideal para darle aire y espacio a tus filas sin complicarte la vida.

Sintaxis de grid-row-gap

Si tuviera que describir la sintaxis de esta propiedad en tres palabras, diría que es intuitiva, precisa y flexible, pues, la verdad, es fácil de utilizar y la puedes adaptar a tus necesidades. Básicamente, sigue la siguiente estructura:

grid-row-gap: valor;

Valores 

En cuanto a los valores, hay dos tipos que puedes utilizar. Veamos cuáles son:

• Longitudes: Puedes usar unidades como px, em, %, entre otras.

grid-row-gap: 20px;

• Valores globales: También puedes optar por valores como inherit, initial o unset.

Un ejemplo básico podría ser el siguiente:

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-row-gap: 20px;
}

En este caso, cada fila tendrá una altura de 100px y un espacio de 20px entre ellas.

Ejemplos de grid-row-gap

Llegados a este punto, me gustaría mostrarte dos ejemplos de cómo puedes usar esta propiedad para diferentes propósitos. Presta atención:

Para organizar tarjetas

Primero, supongamos que tienes un conjunto de tarjetas que quieres distribuir en un grid:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: grid;
  grid-template-rows: repeat(2, 150px);
  grid-row-gap: 30px;
}

.item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 150px;
}

Al hacer esto, las filas tendrán una altura fija de 150px y un espacio de 30px entre ellas.

Crear un diseño responsivo

Hay una realidad que todo desarrollador web debe tener en consideración y es que hay tanta variedad de tamaños en los dispositivos como de usuarios. Por eso, ajustar el grid-row-gap puede hacer que tu diseño luzca perfecto en cualquier pantalla:

.container {
  display: grid;
  grid-template-rows: auto;
  grid-row-gap: 2vw; /* El espacio se ajusta proporcionalmente al ancho de la ventana */
}

Con esta configuración, el espaciado entre filas será proporcional al ancho de la pantalla, lo que dará paso a un diseño mucho más flexible.

Diferencias entre grid-row-gap y row-gap

Como mencioné antes, grid-row-gap ha sido reemplazada, poco a poco, por row-gap en las versiones más recientes de CSS. Aunque funcionan de manera idéntica, la principal diferencia es que row-gap es más universal y también se aplica en otros contextos, como en flexbox. Veamos un ejemplo:

.container {
  display: grid;
  grid-template-rows: auto;
  row-gap: 20px; /* El nuevo estándar */
}

En ese sentido, si estás comenzando con un proyecto nuevo, te recomiendo usar row-gap para asegurarte de que tu código sea compatible con las versiones más modernas de CSS.

Algunos consejos para usar grid-row-gap

Luego de todo lo que hemos visto, te traigo algunos consejos con los que puedes aprovechar mejor esta propiedad:

1. Usa unidades relativas: Siempre que sea posible, opta por em, rem o %, ya que estos valores te permitirán crear un diseño más flexible y responsivo.
2. Evita usar valores extremos: Debes saber que aplicar un espacio demasiado grande o uno demasiado pequeño puede romper la armonía visual. Por eso, evita los extremos y experimenta hasta encontrar el punto más adecuado.
3. Combínalo con otras propiedades de grid: Puedes trabajar también con otras propiedades como grid-template-rows y grid-template-columns, ya que funcionan  perfectamente con grid-row-gap.
4. Prueba en diferentes dispositivos: Como mencioné antes, es muy importante tener en cuenta que los usuarios pueden navegar desde una gran variedad de dispositivos. Por eso, asegúrate de que el espaciado se vea bien tanto en móviles como en pantallas grandes.

Como has visto, aunque esta propiedad haya evolucionado a row-gap, su funcionalidad sigue siendo esencial para crear diseños equilibrados y atractivos. Así que vale la pena que te familiarices con ella, especialmente si necesitas asegurarte de que tu diseño funcione en los navegadores más antiguos que aún no soportan row-gap o si estás trabajando con un código existente que ya utiliza grid-row-gap, para mantener la consistencia.

Si te interesa seguir mejorando tus habilidades en desarrollo web y aprender herramientas prácticas como CSS Grid, ¿qué esperas para unirte al Bootcamp de Desarrollo Web de KeepCoding? Nuestro programa está diseñado para que, además de adquirir los conocimientos necesarios para crear diseños profesionales, puedas transformar tu carrera y empezar a trabajar en el competitivo sector de la tecnología. 

¡El momento de cambiar tu futuro es ahora!