Teoría
Teoría

La propiedad grid-auto-flow

La tarjeta con la clase huge ya ocupa dos filas y dos columnas. Esto dejó una celda vacía en la primera fila: solo quedaba espacio para una columna y la siguiente tarjeta ocupa dos. Por eso pasó a la fila siguiente y dejó la anterior incompleta.

Podemos cambiar este comportamiento con la propiedad grid-auto-flow. Esta controla la colocación automática de los elementos en el contenedor grid.

.grid-container {
  display: grid;
  grid-auto-flow: row;
}

El valor predeterminado, row, coloca los elementos en el orden en que aparecen en el HTML y crea nuevas filas cuando hace falta:

3. Tarjeta que ocupa dos columnas.

En cambio, con el valor dense, el contenedor de este ejemplo se llena sin dejar huecos:

3. Tarjeta que ocupa dos columnas.

El valor dense rellena las celdas vacías con el primer elemento grid que quepa en ellas. El orden visual puede ser distinto del orden de los elementos en el HTML. Si el orden es importante, es mejor no usar este valor.

En nuestra lista no importa el orden de las tarjetas, pero queremos llenar las filas. Añadiremos a la lista grid-auto-flow con el valor dense. Después cambiaremos el ancho de la página y veremos cómo cambian de sitio los elementos.

Por último, quitaremos el ancho fijo de <body>. Cambiaremos el ancho de la ventana del mininavegador para ver cómo varían las columnas y cómo se reorganiza la lista de tarjetas.

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; } .huge { grid-row: span 2; grid-column: span 2; }

ObjetivosRealizado

Añade a la regla de cards-list la propiedad grid-auto-flow con el valor dense. La tarjeta «Consejos de barista» pasará a la primera fila.
Cambia el ancho de body a 450px. La tarjeta «Consejos de barista» volverá a quedar después de la tarjeta más grande.
Elimina la propiedad width de la regla de body.
Cambia el ancho del mininavegador y observa cómo se reorganiza la lista de tarjetas.