CSS
Crea grids fluidos con repeat(), minmax(), auto-fit y auto-fill para adaptar columnas al espacio disponible sin depender de breakpoints fijos.
Grid puede crear layouts responsivos basados en espacio disponible sin definir una media query para cada cantidad de columnas.
.cards {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(16rem, 1fr)
);
gap: 1rem;
}grid-template-columns: repeat(3, minmax(12rem, 1fr));Cada track tiene un mínimo y un máximo.
El mínimo no puede utilizar normalmente una flex value como 1fr; el máximo sí.
minmax(16rem, 1fr)Si el container mide menos de 16rem, puede desbordar.
Patrón defensivo:
minmax(min(100%, 16rem), 1fr)repeat(auto-fill, minmax(12rem, 1fr))Crea tantos tracks como caben, incluso si algunos quedan vacíos.
Los tracks vacíos conservan espacio.
repeat(auto-fit, minmax(12rem, 1fr))Comienza de forma similar, pero colapsa tracks vacíos y permite que los existentes se expandan.
auto-fit: cards disponibles llenan el ancho.auto-fill: quieres preservar slots o la estructura de tracks aunque falten items.Con suficientes items, suelen verse iguales.
El breakpoint resulta del mínimo del track y el espacio del container. No sabe si el texto “se ve bien”; define mínimos basados en el contrato real.
grid-template-columns: repeat(3, minmax(0, 1fr));minmax(0, 1fr) permite que tracks iguales encojan por debajo de min-content. El contenido debe poder envolver o truncarse.
grid-auto-flow: dense;Rellena huecos, pero puede alterar orden visual. No es masonry completo y no debe usarse cuando la secuencia importa.
El mismo patrón responde al ancho real del grid container, incluso sin container query. Container queries aportan cuando también necesitas cambiar estilos internos.
.project-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 20rem), 1fr)
);
gap: clamp(1rem, 2vw, 1.5rem);
}min(100%, X) crea un mínimo defensivo.¿Por qué minmax(20rem, 1fr) puede desbordar un container de 18rem?
Porque el track declara un mínimo de 20rem y no puede encogerse por debajo de él.
Subgrid comparte tracks entre una grid y sus descendientes.