hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

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

400 palabras
2 minutos
August 10, 2020
blogcss

Lo utilizas dentro de grid-template, y combinado con el repeat y el auto-fit/fill te sirve para poder ajustar dinámicamente el número de columnas

  1. La sintaxis
  2. Y cuál es la diferencia entre el auto-fit y el auto-fill?

En una frase, dentro del css grid la función minmax() combinado con repeat y auto-fit | auto-fill es lo que acerca el css-grid al css-flex, o en otras palabras, nos sirve para implementar el wrap dentro de css-grid (algo que en flex tenemos por defecto)

Para entender qué es el grid y cómo se diferencia del flex puedes leerlo en detalle en esta entrada, donde también menciono el minmax pero le dedico poco espacio

Y por qué le dedico poco espacio? Porque su uso es muy sencillo, el problema reside más bien en el hecho de no conocer que existe

La sintaxis

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

Más sencillo, imposible, donde los argumentos de minmax se refieren a los valores máximos y mínimos que podrá tener ese elemento

Pero para verlo, mejor hacerlo con código

html
<div class="grid grid1">
<div class="box one">100px</div>
<div class="box two">100px</div>
<div class="box three">100px</div>
</div>
<div class="grid grid2">
<div class="box one">100px</div>
<div class="box two">100px</div>
<div class="box three">1fr</div>
</div>
<div class="grid grid3">
<div class="box one">100px</div>
<div class="box two">2fr</div>
<div class="box three">1fr</div>
</div>
<div class="grid grid4">
<div class="box one">100px</div>
<div class="box two">minmax(100px, 2fr)</div>
<div class="box three">1fr</div>
</div>
<div class="grid grid5">
<div class="box one">minmax(100px, 1fr)</div>
<div class="box two">minmax(100px, 1fr)</div>
<div class="box three">minmax(100px, 1fr)</div>
</div>
<div class="grid grid6">
<div class="box one">(repeat) minmax(200px, 1fr)</div>
<div class="box two">(repeat) minmax(200px, 1fr)</div>
<div class="box three">(repeat) minmax(200px, 1fr)</div>
</div>
<div class="grid grid7">
<div class="box one">(repeat auto-fit) minmax(150px, 1fr)</div>
<div class="box two">(repeat auto-fit) minmax(150px, 1fr)</div>
<div class="box three">(repeat auto-fit) minmax(150px, 1fr)</div>
</div>
<div class="grid grid8">
<div class="box one">(repeat auto-fill) minmax(200px, 1fr)</div>
<div class="box two">(repeat auto-fill) minmax(200px, 1fr)</div>
<div class="box three">(repeat auto-fill) minmax(200px, 1fr)</div>
</div>
css
.grid {
display: grid;
margin-top: 15px;
}
.grid1 {
grid-template-columns: 100px 100px 100px;
}
.grid2 {
grid-template-columns: 100px 100px 1fr;
}
.grid3 {
grid-template-columns: 100px 2fr 1fr;
}
.grid4 {
grid-template-columns: 100px minmax(100px, 2fr) 1fr;
}
.grid5 {
grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
}
.grid6 {
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
.grid7 {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.grid8 {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.box {
height: 50px;
color: #fff;
padding: 5px;
}
.one {
background: #846e94;
}
.two {
background: #8e9ba9;
}
.three {
background: #ff6b6b;
}

Y este código nos genera lo siguiente para un ancho de 800px y para un ancho de 400px

100px
100px
100px
100px
100px
1fr
100px
2fr
1fr
100px
minmax(100px, 2fr)
1fr
minmax(100px, 1fr)
minmax(100px, 1fr)
minmax(100px, 1fr)
(repeat) minmax(200px, 1fr)
(repeat) minmax(200px, 1fr)
(repeat) minmax(200px, 1fr)
(auto-fit) minmax(150px, 1fr)
(auto-fit) minmax(150px, 1fr)
(auto-fit) minmax(150px, 1fr)
(auto-fill) minmax(150px, 1fr)
(auto-fill) minmax(150px, 1fr)
(auto-fill) minmax(150px, 1fr)
100px
100px
100px
100px
100px
1fr
100px
2fr
1fr
100px
minmax(100px, 2fr)
1fr
minmax(100px, 1fr)
minmax(100px, 1fr)
minmax(100px, 1fr)
(repeat) minmax(100px, 1fr)
(repeat) minmax(100px, 1fr)
(repeat) minmax(100px, 1fr)
(auto-fit) minmax(150px, 1fr)
(auto-fit) minmax(150px, 1fr)
(auto-fit) minmax(150px, 1fr)
(auto-fill) minmax(150px, 1fr)
(auto-fill) minmax(150px, 1fr)
(auto-fill) minmax(150px, 1fr)

Si te fijas, en la versión 400px si no combinamos el minmax con el repeat y el auto-fill|fit vemos en la fila 6 como no hay ningún wrap, los elementos simplemente se salen del contenedor

Con flex esto no sucedería, y con css-grid conseguimos el mismo ajuste combinando lo dicho, que es lo que ves en las filas 7 y 8

Y cuál es la diferencia entre el auto-fit y el auto-fill?

En la versión 400px ves como no hay diferencia entre utilizar los dos

No hay diferencia porque no hay espacio libre

La diferencia está en qué hacen estas dos opciones cuando sí hay espacio libre

  • auto-fit: Si tienes 1000px y 3 columnas con un mínimo de 150px y un máximo de 1fr, cada columna utilizará 333px (el máximo)

  • auto-fill: Si tienes 1000px y 3 columnas con un mínimo de 150px y un un máximo de 1fr, el sistema calcula que te caben 6 columnas de 150px y un espacio sobrante de 100px, por lo que te cabrían 6 columnas a 166px, así que te dibuja 3 columnas de 166px y verás un espacio sobrante de 502px

Y lo mismo cuando tienes 400px de espacio:

  • auto-fit: Si tienes 400px y 3 columnas con un mínimo de 150px y un máximo de 1fr, cada columna utilizará 200px (el máximo) y habrá wrap

  • auto-fill: Si tienes 400px y 3 columnas con un mínimo de 150px y un un máximo de 1fr, el sistema calcula que te caben 2 columnas de 150px, por lo que te cabrían esas 2 columnas de 200px con wrap y un tercer elemento con el mismo ancho en la nueva fila

A efectos prácticos, cuando el ancho te provoca wrap ves lo mismo con auto-fit y con auto-fill

Lo puedes ver en el siguiente gif, a medida que el espacio se va reduciendo aplican los cálculas que digo arriba hasta que llega a un punto donde ambas soluciones actúan exactamente igual

imagen demostración css-gif
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 🙏

Más entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]