🖖 Inicio

SERVICIOS

Salir

nochedía

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

100 palabras
1 minutos
April 12, 2020
blogcss

Lo utilizas dentro de grid-template, y te sirve para poder ajustar dinámicamente el número de columnas

  1. Cuándo lo utilizaremos?
  2. La sintaxis?
  3. Ejemplos?

En una frase, dentro del css grid la función minmax() es lo que acerca el css-grid al css-flex

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

Por qué?

Porque su uso es muy sencillo, el problema está en no conocer de su existencia

Cuándo lo utilizaremos?

Cuando estemos utilizando la propiedad grid-template-rows y/o grid-template-columns

La sintaxis?

minmax(min,max)

Más sencillo, imposible

Ejemplos?

Si queremos una estructura de columnas idénticas en tamaño y que se adapten hasta un mínimo de 200px, podemos hacer lo siguiente

css
grid-template-columns: repeat(3, minmax(200px, 1fr));

Y si queremos que esas columnas se apilen al estilo flex, tan sencillo como esto

css
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Con auto-fit utilizas todo el espacio para tantas columnas te sea posible

Es decir, en un espacio de 1000px te cabrán 5 columnas de 200px, si sólo tienes 3 éstas ocuparán 600px

Con auto-fill es distinto, si tienes 3 columnas las meterá todas (sólo 3, no más) en ese espacio, con lo que cada columna tendrá 333px de ancho

Aquí tienes un gif auto-explicativo que te permite visualizar por qué si utilizas css-grid terminarás utilizando el minmax (el de arriba es auto-fill, el de abajo auto-fit)

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 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]