handHOME

Cómo funciona el minmax() en el css grid?

El minmax sirve 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 donde no tiene sentido tener 2 columnas donde no caben 2 columnas

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 una alternativa a css flex o a css grid con media queries)

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)”

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

La columna tiene que tener mínimo de 300px, pero el máximo es de 1fr, así que como hay disponibles 500px la columna tendrá ese ancho de 500px

La sintaxis es simple

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

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 %, …)

La diferencia entre auto-fit o auto-fill:

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

image

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

image

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

image

El texto está en blanco!
Enviado!