Cuadrículas expertas: subgrid, auto-fit y minmax

Construye cuadrículas que se adaptan solas sin media queries y alinea componentes anidados sobre las pistas del padre con subgrid.

10 min · 3 preguntas

repeat(auto-fill, ...) y repeat(auto-fit, ...) crean tantas pistas como permita el ancho del contenedor. La diferencia solo se nota cuando hay menos elementos que pistas posibles: auto-fill conserva las pistas vacías (tus dos tarjetas se quedan en su tamaño mínimo, con espacio vacío a la derecha), mientras que auto-fit colapsa las pistas vacías a cero - las pistas ocupadas, con un máximo 1fr, absorben entonces todo el espacio liberado y tus dos tarjetas se estiran a lo ancho completo.

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

Dos trampas de minmax() con las que tropiezan hasta los desarrolladores sénior. Primera: minmax(240px, 1fr) desborda cuando el contenedor es más estrecho que 240px - el mínimo es un suelo rígido. La solución idiomática anida una función de comparación: minmax(min(100%, 240px), 1fr). Segunda: 1fr a secas equivale a minmax(auto, 1fr); el mínimo auto permite que un contenido irrompible (una URL larga, un <pre>) ensanche la pista más allá de su parte. minmax(0, 1fr) bloquea el reparto.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 240px), 1fr)
  );
}

subgrid resuelve el viejo problema de la alineación entre componentes anidados. Con grid-template-rows: subgrid, la cuadrícula interna no inventa sus propias pistas: adopta las del padre sobre el área que abarca. También hereda los nombres de línea del padre (y puede añadir los suyos), así como el gap, que puede sobrescribir localmente. El caso clásico: tarjetas cuyo título, descripción y pie se alinean horizontalmente de una tarjeta a la siguiente, sea cual sea la longitud de su contenido - imposible de lograr de forma limpia antes de subgrid, porque cada tarjeta calculaba sus alturas de forma aislada.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0.5rem;
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. Un contenedor puede alojar 6 pistas pero solo contiene 2 elementos. ¿Cuál es la diferencia entre auto-fill y auto-fit?
   • Ninguna, son dos alias del mismo valor
   • auto-fill conserva 4 pistas vacías; auto-fit las colapsa y los 2 elementos se estiran
   • auto-fit siempre crea más pistas que auto-fill
2. ¿Qué adopta exactamente un elemento declarado con grid-template-rows: subgrid?
   • Solo el número de filas del padre
   • Los tamaños de pista y los nombres de línea del padre sobre el área abarcada, con el gap heredado pero sobrescribible
   • Todas las propiedades de cuadrícula del padre, incluidas sus áreas nombradas
3. ¿Por qué escribir minmax(min(100%, 240px), 1fr) en lugar de minmax(240px, 1fr)?
   • Para garantizar 240px en cada pantalla
   • Para evitar el desbordamiento cuando el contenedor es más estrecho que 240px
   • Porque min() es obligatorio dentro de repeat() desde Grid Level 2