auto-fit vs auto-fill: grids responsivos sin media queries

Una sola línea de CSS resuelve el problema "quiero tantas columnas como quepan": la línea más famosa de Grid. Hoy la entiendes pieza por pieza — y aprendes la diferencia entre auto-fit y auto-fill, la pregunta de entrevista favorita del CSS moderno.

La línea famosa

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

Traducción palabra por palabra: "crea tantas columnas como quepan (auto-fit), cada una de mínimo 180px y elástica hasta repartirse el espacio (minmax(180px, 1fr))". En 900px caben 4 columnas; en 500px, 2; en 360px, 1. Cero media queries, y — a diferencia del flex-wrap del módulo 5 — las tarjetas quedan alineadas en AMBOS ejes, fila tras fila.

auto-fit vs auto-fill: la diferencia

Idénticas cuando hay ítems de sobra. La diferencia aparece cuando hay POCOS:

<p class="t">auto-fit: colapsa columnas vacías — 2 ítems se estiran</p>
<div class="g fit"><div class="c">1</div><div class="c">2</div></div>
<p class="t">auto-fill: mantiene los carriles vacíos — 2 ítems quedan chicos</p>
<div class="g fill"><div class="c">1</div><div class="c">2</div></div>

body { font-family: system-ui; padding: 20px; }
.t { font-size: 12px; color: #64748b; margin: 0 0 4px; }
.g { display: grid; gap: 8px; background: #f1f5f9; border-radius: 8px; padding: 8px; margin-bottom: 12px; }
.fit { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.fill { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.c { background: #6d28d9; color: white; border-radius: 6px; padding: 16px; font-weight: 700; text-align: center; }

• auto-fit: crea las columnas que caben y COLAPSA las que quedaron vacías — los ítems presentes se estiran para llenar el ancho.
• auto-fill: crea las columnas que caben y las DEJA, aunque estén vacías — los ítems se quedan en su tamaño mínimo-cómodo.

Mini-reto

Migra la galería Pinterest del módulo 5 a repeat(auto-fit, minmax(180px, 1fr)) y compara con tu versión flex: ¿notas que ahora las tarjetas se alinean también verticalmente por filas? Decide cuál prefieres para ESE diseño — tener el criterio es el objetivo.

Qué sigue

Grids que se administran solos. La próxima lección toma el control manual: posicionar ítems por número de línea, hacer que ocupen varias celdas (span) y — el truco elegante — superponer capas en la misma celda.