¿Qué son auto-fit y auto-fill?

Ambas palabras clave forman parte de la sintaxis repeat() de CSS Grid y permiten crear columnas (o filas) que se repiten automáticamente según el espacio disponible.

• auto-fill: crea tantas pistas (track) como sea posible, incluso si quedan vacías.
• auto-fit: behave similar, pero contrae las pistas vacías, dejando que el contenido las ocupe.

La diferencia clave se vuelve evidente cuando el contenedor no tiene suficiente contenido para rellenar todas las pistas creadas.

Comparativa rápida (2‑column layout)

Ejemplo 1: Galería de imágenes con auto-fill

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

En este caso, auto-fill crea tantas columnas de 150px como el contenedor lo permita. Si el número de imágenes es menor que el número de columnas, el resto queda como espacio vacío, manteniendo la alineación de la cuadrícula.

Ejemplo 2: Tarjetas fluidas con auto-fit

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Con auto-fit, si solo hay dos tarjetas, ambas se expanden para ocupar todo el ancho del contenedor, evitando los huecos que produciría auto-fill.

Uso avanzado: combinar minmax() con media queries

.responsive-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (max-width: 600px) {
  .responsive-grid {
    grid-template-columns: 1fr; /* forzar una columna en móviles */
  }
}

Esta técnica garantiza que, en dispositivos pequeños, la cuadrícula colapse a una sola columna, mientras que en pantallas mayores auto-fit mantiene el comportamiento fluido.

Compatibilidad y rendimiento

• Soporte completo en navegadores modernos (Chrome 57+, Firefox 52+, Edge 16+, Safari 10.1+).
• En navegadores legacy, la regla se ignora y el layout vuelve al comportamiento de grid-template-columns: none, por lo que siempre se recomienda un fallback display: block;.
• Rendimiento: repeat(auto-fit/fill) no afecta significativamente el renderizado; sin embargo, evitar minmax() con valores extremadamente grandes (p. ej., 100vh) puede reducir el cálculo de pistas.

Mejores prácticas y trucos de troubleshooting

1️⃣ Elige auto-fit cuando quieras que los ítems ocupen todo el ancho disponible.

2️⃣ Usa auto-fill para mantener una cuadrícula “fija” y predecible, útil en galerías o tableros de control.

3️⃣ Verifica el gap y los padding de los ítems; a veces los huecos aparecen por márgenes internos y no por la diferencia entre fit y fill.

4️⃣ Si notas que el layout colapsa inesperadamente, revisa que la unidad de minmax() sea razonable (p. ej., minmax(0, 1fr) es la forma más segura).

5️⃣ En entornos de producción, habilita prefers-reduced-motion para evitar transiciones de grid que puedan generar “jank” en dispositivos móviles.

Conclusión

auto-fit y auto-fill son dos caras de la misma moneda que, bien empleadas, facilitan la creación de diseños responsivos sin necesidad de media queries excesivas. La clave está en comprender cuándo los huecos son deseables (galerías) y cuándo deben desaparecer (tarjetas fluidas).