Teoría
Teoría

El valor auto-fit

En el ejercicio anterior usamos repeat para crear varias columnas. Su cantidad era fija: el número entre paréntesis indicaba en cuántas columnas se dividía el contenedor. Ahora necesitamos que la cantidad dependa del ancho de la ventana.

Para ello usaremos el valor especial auto-fit. Se escribe entre los paréntesis de repeat, en lugar de la cantidad de columnas:

grid-template-columns: repeat(auto-fit, ancho de la columna);

El valor auto-fit indica que deben crearse tantas columnas como quepan en el contenedor grid.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
}

El código del ejemplo divide el contenedor en columnas de 100px de ancho.

repeat(auto-fit, 100px)

width: 200px;

width: 300px;

width: 400px;

Mejoraremos la lista de tarjetas. Sustituiremos la cantidad fija de columnas por auto-fit. Después cambiaremos el ancho de <body> y veremos cómo se reorganiza la lista.

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-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(3, 140px); gap: 15px; margin: 0; padding: 20px; } .card { padding: 15px; }

ObjetivosRealizado

Cambia el valor de grid-template-columns a repeat(auto-fit, 140px). Habrá cuatro columnas.
Cambia el ancho de body a 335px. Habrá dos columnas.
Ahora cámbialo a 640px. Volverá a haber tres columnas, pero quedará espacio libre a la derecha.