Responsive sin media queries: auto-fit y minmax — CSS Grid

repeat(): no te repitas

Escribir 1fr 1fr 1fr 1fr es tedioso. repeat() lo abrevia:

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* equivale a 1fr 1fr 1fr 1fr */
  gap: 16px;
}

minmax(): un mínimo y un máximo

minmax(min, max) define el tamaño de una pista con un suelo y un techo. minmax(200px, 1fr) significa: "nunca más estrecha de 200px, pero crece para repartir el espacio sobrante".

grid-template-columns: minmax(200px, 1fr) 2fr;

El patrón estrella: tarjetas que se reacomodan solas

Combinando repeat(), minmax() y la palabra clave auto-fit consigues una rejilla responsive sin escribir ni una media query:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Lee la regla así: "crea tantas columnas de mínimo 200px como quepan; cuando no quepa una más, salta de fila". Arrastra el borde de la ventana de una rejilla de productos y mira la magia: las tarjetas pasan de 4 a 3, a 2, a 1 columna solas, sin una sola media query. Es el layout de tarjetas más usado de la web moderna, y con esta única línea ya lo dominas.

auto-fit vs auto-fill

Ambas crean "tantas columnas como quepan", pero difieren cuando sobra espacio y hay pocos items:

auto-fill: mantiene las pistas vacías reservadas. Las tarjetas conservan su ancho mínimo y queda hueco a la derecha.
auto-fit: colapsa las pistas vacías a 0 y deja que los items existentes se estiren para llenar la fila.

Para galerías de tarjetas suele quererse auto-fit: aprovecha todo el ancho. Usa auto-fill cuando quieras preservar la cuadrícula aunque haya pocos items.