Teoría
Teoría

La propiedad grid-row

Ya extendimos una tarjeta a lo largo de varias columnas. Al diseñador le gustó la idea y decidió ir más lejos: ahora hay una tarjeta que necesita dos columnas y dos filas. Ya está en el HTML; solo falta escribir los estilos adecuados.

Podemos extender un elemento a lo largo de varias filas con grid-row. La palabra clave span funciona igual que en grid-column, pero indica la cantidad de filas que debe ocupar:

.long-element {
  grid-row: span 2;
}

El elemento del ejemplo ocupará dos filas:

3
Tarjeta que ocupa dos filas.

Podemos usar grid-column y grid-row al mismo tiempo. Por ejemplo, este código hace que el elemento ocupe tres columnas y dos filas:

.element {
  grid-column: span 3;
  grid-row: span 2;
}

La tarjeta que tiene el doble de ancho y de alto que las demás lleva la clase huge. Haremos que ocupe dos filas y dos columnas.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="list-decorative.css"> <link rel="stylesheet" href="style.css"> <title>Lista de tarjetas</title> </head> <body> <ul class="cards-list"> <li class="card"> <img src="img/coffee-1.jpg" alt="Café: el largo viaje del cafeto a tu taza" width="110" height="110"> <h2>Café: el largo viaje del cafeto a tu taza</h2> </li> <li class="card"> <img src="img/coffee-2.jpg" alt="Las mejores cafeteras para casa" width="110" height="110"> <h2>Las mejores cafeteras para casa</h2> </li> <li class="card huge"> <img src="img/coffee-3.jpg" alt="Enciclopedia del café: todo lo que querías saber y no te atrevías a preguntar" width="260" height="260"> <h2 class="accent">Enciclopedia del café: todo lo que querías saber y no te atrevías a preguntar</h2> </li> <li class="card"> <img src="img/coffee-4.jpg" alt="Consejos de barista: ¿qué café elegir?" width="110" height="110"> <h2>Consejos de barista: ¿qué café elegir?</h2> </li> <li class="card"> <img src="img/coffee-5.jpg" alt="Recetas para Año Nuevo" width="110" height="110"> <h2>Recetas para Año Nuevo</h2> </li> <li class="card wide"> <img src="img/coffee-6.jpg" alt="20 cafeterías que vale la pena visitar" width="260" height="110"> <h2 class="accent">20 cafeterías que vale la pena visitar</h2> </li> <li class="card"> <img src="img/coffee-7.jpg" alt="Guía de métodos alternativos de preparación" width="110" height="110"> <h2>Guía de métodos alternativos de preparación</h2> </li> </ul> </body> </html>

CSS

body { width: 490px; margin: 15px; } .cards-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin: 0; padding: 20px; } .card { padding: 15px; } .wide { grid-column: span 2; }

ObjetivosRealizado

Crea una regla para la tarjeta con la clase huge y añade grid-row con el valor span 2. La tarjeta ocupará dos filas.
Haz que la tarjeta con la clase huge ocupe dos columnas. Fíjate en que solo quedaron dos tarjetas en la primera fila.