Grid-row-end en CSS: Define la línea final de tus elementos

En otra ocasión, te hablé de grid-row-start, una propiedad del modelo de cuadrícula, CSS grid, con la que puedes especificar en qué línea de la fila debe comenzar un elemento dentro de una cuadrícula. Hoy, quiero hablarte de una propiedad similar, pero a la vez diferente. ¿Qué quiero decir con esto? Pues, que vamos a aprender cómo usar grid-row-end, otra de las propiedades que te permitirán alinear los elementos con una precisión quirúrgica dentro de la cuadrícula. Así que presta atención y toma nota porque te contaré qué es, para qué sirve y te mostraré cómo usarla con ejemplos prácticos.

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

Grid-row-end es una propiedad de CSS Grid que define en qué línea de fila termina un elemento dentro de una cuadrícula. Si pensamos en una cuadrícula como un tablero de ajedrez, esta propiedad te permite decidir hasta qué punto deben desplazarse cada una de tus piezas dentro de ese tablero.

En ese sentido, grid-row-end es la contraparte de grid-row-start. Básicamente, mientras que grid-row-start específica en qué línea de fila debe comenzar un elemento en una cuadrícula, grid-row-end determina en qué línea de fila debe terminar. Al combinar las dos propiedades, puedes definir con precisión la posición y el tamaño de un elemento en la cuadrícula.

La principal ventaja de esto es que, cuando necesitas crear diseños personalizados o controlar el espacio vertical que ocupa cada elemento, puedes lograr resultados más limpios y organizados.

¿Para qué sirve grid-row-end?

Usar esta propiedad puede representar diferentes ventajas. Veamos algunas de las más importantes:

1. Controlar el tamaño vertical de los elementos: Con ella, puedes definir hasta dónde se expande un elemento en términos de filas.
2. Optimizar el diseño de cuadrículas complejas:Te permite jugar con las proporciones de los elementos para resaltar las áreas importantes o para equilibrar visualmente tu diseño.
3. Personalizar layouts: También es muy útil para trabajar con tableros de control, galerías de imágenes o cualquier diseño que necesite un ajuste preciso.

Sintaxis de grid-row-end

La sintaxis de grid-row-end es sencilla, como puedes ver a continuación:

grid-row-end: <valor>;

Valores más comunes

Otra ventaja de esta propiedad es que los valores que permite son los mismos que están disponibles para su contraparte, grid-row-start. De esta manera, al dominar una, puedes entender fácilmente cómo dominar la otra.

1. Un número positivo: Especifica la línea de fila donde termina el elemento. Por ejemplo, grid-row-end: 3; hará que el elemento termine en la tercera línea de fila.
2. span <número>: Indica que el elemento debe abarcar un número específico de filas desde su punto de inicio. Por ejemplo, grid-row-end: span 2; extenderá el elemento dos filas hacia abajo.
3. auto: El navegador determinará automáticamente el final del elemento según su contenido o contexto.

Ejemplos de grid-row-end

Vamos a explorar tres ejemplos prácticos que ilustran cómo funciona esta propiedad.

Cómo establecer el final de un elemento

Imagina que tienes una cuadrícula de tres filas y tres columnas, y quieres que un elemento termine en la segunda línea de fila:

<div class="grid">
  <div class="item">1</div>
  <div class="item special">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
  }

  .item {
    background-color: #6c63ff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .special {
    grid-row-end: 2;
  }
</style>

En este caso, el elemento con la clase special finaliza justo antes de la segunda línea de fila.

Cómo expandir las filas con span

Ahora, veamos cómo extender un elemento para que abarque dos filas consecutivas:

<div class="grid">
  <div class="item">A</div>
  <div class="item special">B</div>
  <div class="item">C</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(2, 150px);
    gap: 10px;
  }

  .item {
    background-color: #ff6f61;
    color: white;
    text-align: center;
    line-height: 100px;
  }

  .special {
    grid-row-end: span 2;
  }
</style>

Aquí, el elemento special se expande desde su inicio hasta abarcar dos filas.

Cómo usar grid-row-end junto con otras propiedades

La mejor parte es cuando combinas grid-row-end con otras propiedades como grid-row-start o grid-column-start.

<div class="grid">
  <div class="item">1</div>
  <div class="item special">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
  }

  .item {
    background-color: #4caf50;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .special {
    grid-row-start: 1;
    grid-row-end: 3;
  }
</style>

En este ejemplo, el elemento special comienza en la primera fila y se extiende hasta la tercera, lo que crea un diseño dinámico y bien estructurado.

Recomendaciones para usar grid-row-end

Como has llegado hasta aquí, te mereces unos consejos extra. Por eso, te daré tres recomendaciones que, desde mi experiencia, pueden hacer una buena diferencia en tus proyectos:

1. Planifica tu diseño con anticipación: Una de mis principales recomendaciones es que utilices herramientas de diseño o bosquejos para visualizar cómo quieres distribuir tus elementos en la cuadrícula. Por ejemplo, podrías utilizar CSS Grid Generator, o si prefieres herramientas más complejas, Figma o Adobe XD.
2. Combínalo con otras propiedades: No dudes en aprovechar otras propiedades como grid-row-start y grid-template-areas para tener un control total sobre la distribución de tus elementos.
3. Experimenta con span: Este valor es una forma flexible de extender elementos sin tener que preocuparte por las líneas específicas de la cuadrícula.

Luego de todo esto, ya sabes por qué es importante aprender a dominar la propiedad grid-row-end. Ahora, mi invitación es a que continúes practicando, ya sea creando un diseño minimalista o algo más complicado. También quiero añadir que, si quieres convertirte en un experto del tema, en nuestro Bootcamp en Desarrollo Web encontrarás todas las herramientas que necesitas. Hemos diseñado nuestro programa para que, en cuestión de meses, puedas dominar las tecnologías más demandadas y empezar a trabajar en un sector lleno de oportunidades, como lo es el IT.

¿Te atreves a dar el paso que cambiará tu vida?