Posicionamiento de elementos en Grid-row

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 32 de 43.

La propiedad grid-row te permite controlar dónde se ubica un item verticalmente en un CSS Grid. Especifica en qué row comenzar y terminar el item.

Antes de comenzar, es importante comprender la diferencia entre las líneas de grid y las pistas de grid.

Las líneas de grid son las líneas divisorias (numeradas 1, 2, 3, etc.) que componen la estructura del grid. Un grid track es el espacio entre dos líneas de grid adyacentes; esencialmente, la fila o columna en sí misma.

Supongamos que tenemos un container simple con 8 elementos, y queremos que el primer item se extienda desde la line 1 de la fila hasta la line 4 en la grid:

.item1 {
  grid-row: 1 / 4;
}

Así es como se ve:

Para extenderse a través de múltiples filas, también puedes usar la palabra clave span:

.item2 {
  grid-row: 2 / span 2;
  background-color: lightpink;
}

Esto ubica a item2 comenzando en row line 2 y abarcando 2 rows (o 2 tracks).

Desafío

Fácil

Usa la propiedad grid-row para hacer que el cuarto elemento de la cuadrícula se extienda desde la línea de fila 2 hasta la línea de fila 4.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
  font-size: 30px;
}
/* Add your CSS styles here */

</style>
</head>
<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

</body>
</html>