hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

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

400 palabras
2 minutos
September 5, 2020
blogcss

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

css
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:

css
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:

css
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

css
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

css
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

imagen autofit

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
imagen autofill

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

imagen demostraci贸n css-gif

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

Qu茅 tal la entrada?

馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusi贸n 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]