Posicionamiento de elementos en Grid-row

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 32 de 43.

La propiedad grid-row te permite controlar dónde se coloca verticalmente un elemento en una cuadrícula CSS. Especifica en qué row iniciar y finalizar el elemento.

Antes de comenzar, es importante entender la diferencia entre las líneas de cuadrícula y los trazados de cuadrícula.

Las líneas de cuadrícula son las líneas divisorias (numeradas 1, 2, 3, etc.) que forman la estructura de la cuadrícula. Una pista de cuadrícula es el espacio entre dos líneas de cuadrícula adyacentes: esencialmente, la fila o columna en sí.

Supongamos que tenemos un contenedor simple con 8 elementos y queremos que el primer elemento abarque desde la línea de fila 1 hasta la línea de fila 4 en la cuadrícula:

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

Así es como se ve:

Para abarcar varias filas, también puedes usar la palabra clave span:

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

Esto coloca item2 comenzando en la línea de fila 2 y extendiéndose a lo largo de 2 filas (o 2 pistas).

Desafío

Fácil

Usa la propiedad grid-row para hacer que el cuarto elemento de la cuadrícula abarque 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>