Teoría
Teoría

La propiedad grid-column

Añadimos una tarjeta cuyo contenido no cabe en una columna. El diseñador insiste en que no podemos reducir el texto ni la imagen. ¿Qué hacemos? Dejaremos que la tarjeta ocupe dos columnas.

Podemos hacerlo con la propiedad grid-column:

.element {
  grid-column: span 2;
}

El elemento del ejemplo ocupará dos columnas:

4. Tarjeta que ocupa dos columnas.

Para extender un elemento grid, se escribe span seguido de la cantidad de columnas que debe ocupar:

/* Este elemento ocupará tres columnas */
.wide-element {
  grid-column: span 3;
}

/* Y este, cuatro */
.very-wide-element {
  grid-column: span 4;
}

Necesitamos que la tarjeta ocupe dos columnas. Le añadiremos otra clase y usaremos grid-column para extenderla. Probaremos distintos valores de span y distintos anchos de página.

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"> <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"> <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: 645px; margin: 15px; } .cards-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin: 0; padding: 20px; } .card { padding: 15px; }

ObjetivosRealizado

Añade una segunda clase, wide, a la tarjeta de la línea 27.
En style.css, crea una regla para la clase wide y añade grid-column con el valor span 3. La tarjeta ocupará tres columnas.
Cambia el valor de grid-column a span 2. La tarjeta ocupará dos columnas.
Cambia el ancho de body a 490px.