El minmax nos sirva para definir un valor dentro de un mínimo y un máximo, y tiene su aplicación dentro de css grid

display: grid;
grid-template-columns: 150px 150px; // 2 columnas fijas
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px); // 2 columnas dinámicas

Sin embargo, el número de columnas siempre será de 2, y esto es una limitación cuando pensamos en diseños responsive

Por eso, la potencia de minmax la encontramos cuando lo combinamos con el repeat(), porque entonces conseguimos que el número de columnas sea también dinámico

Es decir, qué pasa cuando tenemos una distribución de 4 columnsa, pero el espacio que tenemos no da para 4 columnas (en un móvil por ejemplo), y queremos que el número de columnas se adapte?

• Una opción es utilizar el css flex

• Otra opción es utilizar el css grid con los media queries

• Y otra opción es utilizar el css grid con el minmax

Con media queries haríamos lo siguiente:

display: grid;
grid-template-columns: repeat(2, 300px); /* tenemos 2 columnas */

@media (min-width: 600px) {
  /* este bloque se ejecutará sólo por encima de los 600px de ancho */
  grid-template-columns: repeat(4, 300px); /* por encima de 600px tenemos 4 columnas */
}

Es decir, definimos siempre dos columnas con el repeat(2, 300px), y luego especificamos otra norma de 4 columnas cuando el ancho sea mayor de 600px

Esta solución es buena, pero podemos hacerlo diferente con minmax:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

Lo que nos dice esta norma viene a ser algo tipo "pinta tantas columnas como puedas que vayan de 300px hasta 1fr (el máximo espacio que esté disponible)"

O en otras palabras, que si tenemos 500px de ancho, allí sólo cabrá 1 columna (2 columnas de mínimo 300px ya serían 600px, no caben), por lo que pondrá sólo una columna y el resto ira para la siguiente línea

Eso sí, la columna tiene que tener mínimo de 300px, pero el máximo es de 1fr, y hay disponibles 500px, por lo que la columna tendrá ese ancho de 500px

La sintaxis es simple

repeat(auto-fit|auto-fill, minmax(min,max))

Donde la única duda es si utilizamos auto-fit o auto-fill, y luego tocará establecer los min y max como queramos (en px, en fr, en %, ...)

Y qué diferencia hay entre las dos?

Lo vemos con un ejemplo teniendo 3 elementos a colocar

width: 850px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Aquí, con 850px tenemos espacio para colocar hasta 4 columnas de 200px que darían 800px, quedando un espacio vacío de 50px

El resultado con auto-fit es simplemente colocar los elementos aprovechando todo el espacio disponible, sin importar el cálculo anterior

En cambio, con auto-fill, sí que importa el cálculo anterior, y por lo tanto

• Caben 4 elementos de 200px, que si aprovechamos todo el espacio son 4 elementos de 212px
• Pero tenemos sólo 3 elementos
• Así que colocamos sólo 3 elementos de 212px

Y si tenemos 700px disponibles?

En el caso de auto-fill el cálculo nos dice que caben sólo 3 elementos de 200px, con lo que colocará esos 3 elementos aprovechando todo el espacio disponible, lo cual es exactamente lo mismo que hace auto-fit y por lo tanto no hay diferencia

Es decir, auto-fill y auto-fit sólo presentan diferencias cuando hay espacio disponible para colocar más elementos de los que tengo para ordenar

Lo vemos por ejemplo en este gif animado

Y también puedes echarle un vistazo a diferentes ejemplos de distribuciones grid incluyendo el minmax