Construir una rejilla flexible con repeat() y minmax()

En esta lección crearás una cuadrícula que ajusta sola el número de columnas según el espacio disponible, sin una sola media query.

La declaración clave es repeat(auto-fill, minmax(100px, 1fr)). minmax(100px, 1fr) dice «cada columna mide al menos 100px y como mucho una fracción del espacio»; auto-fill le pide al navegador que quepan tantas columnas como sea posible con esa regla.

El código de ejemplo coloca seis elementos en una rejilla así. Cambia el ancho de la vista previa y verás cómo pasan de seis en fila a tres, a dos, sin que tú hayas definido ningún punto de ruptura.

Merece la pena conocer la diferencia con auto-fit: cuando hay pocos elementos, auto-fill deja columnas vacías reservadas y auto-fit las colapsa para que los elementos se estiren. Si te sobra un hueco raro a la derecha, prueba a cambiar uno por otro.

Este patrón resuelve de una tacada las galerías de productos, las listas de artículos y los tableros de tarjetas, que son exactamente los sitios donde antes se acumulaban tres o cuatro media queries.