Se utiliza dentro de grid-template
, permite definir un rango dinámico de valores, y combinado con el repeat
y el auto-fit/fill
, y sirve para poder ajustar dinámicamente el número de columnas
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 losmedia queries
-
Y otra opción es utilizar el
css grid
con elminmax
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
Lista de correo: escribo algo de tanto en cuanto