Hasta ahora has usado cuadrículas con un número fijo de columnas. Eso está bien para aprender y también para muchos layouts concretos. Pero tarde o temprano aparece la pregunta incómoda:
¿Qué pasa cuando esas tres columnas no caben en una pantalla pequeña?
Podrías cambiarlo con media queries. Y a veces lo harás. Pero Grid tiene un truco buenísimo para resolver muchos casos sin necesidad de escribir reglas extra: minmax() junto a auto-fit.
minmax() dice: no menos de esto, pero puede crecerminmax() define un tamaño mínimo y uno máximo para una pista.
Por ejemplo:
Eso significa:
Es una manera elegantísima de decirle a Grid: "quiero columnas flexibles, pero no ridículamente estrechas".
auto-fit llena la fila con las columnas que quepanAhora junta esa idea con repeat():
Traducido al idioma humano:
Resultado:
Este patrón aparece constantemente en galerías, catálogos, listados de cursos, tarjetas de productos y paneles de dashboard.
En vez de pensar:
puedes pensar:
Y dejas que Grid haga el resto.
auto-fit vs auto-fill en una fraseExiste otra palabra parecida: auto-fill. Ambas son útiles, pero para empezar puedes quedarte con esta intuición:
auto-fit intenta aprovechar el espacio sobrante estirando las columnas existentes.auto-fill tiende a conservar huecos potenciales aunque no haya contenido para llenarlos.Para una cuadrícula responsive de tarjetas, auto-fit suele ser la opción más amable.
Convierte .catalogo en una cuadrícula responsive usando display: grid, grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) y gap: 16px.
Cuando Grid entiende tamaños mínimos, deja de necesitar que lo rescates en cada breakpoint...