Grids fluidos: repeat, auto-fit y minmax

En L-1 definiste columnas con tamaños fijos en px. Eso funciona, pero Grid tiene herramientas más poderosas que permiten crear layouts responsive sin media queries: repeat(), auto-fill/auto-fit y minmax().

Estas propiedades computan a píxeles resueltos variables (dependen del ancho del contenedor en el momento del layout) — por eso esta lección es de teoría: el punto pedagógico es observar el reflow en el preview, no validar el valor exacto de las pistas.

`repeat()` — azúcar sintáctica para pistas repetidas

repeat(N, tamaño) evita repetir el mismo valor:

/* Equivalentes: */
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);

/* Más legible con muchas columnas: */
grid-template-columns: repeat(12, 1fr); /* grilla de 12 columnas */

`auto-fill` vs `auto-fit` — columnas que se adaptan solas

Cuando se combina con minmax(), permiten grids que generan o colapsan columnas según el espacio disponible.

/* auto-fill: crea tantas columnas de al menos 200px como quepan */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: igual que auto-fill PERO colapsa las columnas vacías */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

La diferencia sutil — con pocos ítems:

Imaginá un contenedor de 1000px que podría albergar 4 columnas de 250px, pero solo tiene 2 ítems:

auto-fill: crea 4 columnas. Los 2 ítems ocupan las primeras 2 columnas; las otras 2 quedan vacías. Los ítems no crecen para llenar el espacio.
auto-fit: colapsa las columnas vacías (las pone a width: 0). Los 2 ítems se expanden y cada uno ocupa la mitad del contenedor.

Con muchos ítems (que llenan todas las columnas) el resultado es idéntico.

`minmax()` — pistas elásticas con tope

minmax(min, max) define un rango de tamaño para una pista: no será más pequeña que min ni más grande que max.

/* Cada pista: mínimo 150px, máximo 1fr */
grid-template-columns: repeat(3, minmax(150px, 1fr));

/* Con auto-fit: el caso más común */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Sin minmax(), las pistas de auto-fit no tienen mínimo y podrían comprimirse hasta 0px. Con minmax(200px, 1fr), cada columna tiene garantizado al menos 200px; si no caben suficientes, el grid las mueve a la fila siguiente.

El patrón canónico — grid responsive sin media queries

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

Este es uno de los patrones más potentes de CSS moderno. Probalo en el sandbox: pegá el código, agregá varios .item y reducí el ancho del preview — las columnas se reorganizan solas.

<div class="galeria">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.item {
  background: #4f46e5;
  color: white;
  padding: 24px;
  text-align: center;
}

Observá qué pasa al cambiar el ancho del preview: las columnas aparecen y desaparecen solas según el espacio disponible. Eso es repeat(auto-fit, minmax()) en acción.

Resumen

Herramienta	Qué hace
`repeat(N, tamaño)`	Azúcar sintáctica para N pistas del mismo tamaño
`auto-fill`	Crea tantas pistas como quepan; deja vacías las que sobran
`auto-fit`	Igual que `auto-fill` pero colapsa las pistas vacías
`minmax(min, max)`	Pista con tamaño mínimo y máximo
`repeat(auto-fit, minmax(200px, 1fr))`	El patrón canónico responsive sin media queries

En el Bloque IV (CAT-27) vas a combinar repeat(auto-fit, minmax()) con media queries para control preciso sobre los puntos de quiebre.