CSS Grid Layout Cómo usar minmax ()

los Módulo de diseño de cuadrícula CSS lleva el diseño responsivo al siguiente nivel introduciendo un nuevo tipo de flexibilidad Eso nunca fue visto antes. Ahora, no podemos solo definir cuadrículas personalizadas increíblemente rápido únicamente con CSS puro, pero el CSS Grid también tiene muchas gemas escondidas que nos permiten ajustar aún más la cuadrícula y lograr diseños complicados.

los mínimo máximo() función Es una de estas características menos conocidas. Permite definir el tamaño de una pista de grilla. como mínimo al rango máximo Para que la grilla se adapte a la ventana gráfica de cada usuario de la mejor manera posible..

Sintaxis

La sintaxis de la mínimo máximo() La función es relativamente simple, toma dos argumentos: un mínimo y un máximo valor:

 minmax (min, max) 

los min valor tiene que ser mas pequeño que la max, de otra manera max se ignora por el navegador.

Podemos usar el mínimo máximo() funcionar como el valor de la rejilla-plantilla-columnas o cuadrícula-plantilla-filas propiedad (o ambos). En nuestro ejemplo, usaremos el primero, ya que es un caso de uso mucho más frecuente.

 .contenedor pantalla: rejilla; cuadrícula-plantilla-columnas: minmax (100px, 200px) 1fr 1fr; rejilla-plantilla-filas: 100px 100px 100px; rejilla: 10px;  

En la demostración de Codepen a continuación, puede encontrar el Código HTML y CSS Lo usaremos a lo largo del artículo..

Nosotros podemos usar diferentes tipos de valores dentro de mínimo máximo() función, todo depende de qué tipo de cuadrícula personalizada queremos crear.

Valores de longitud estática

Hay dos formas básicas de cómo podemos usar el mínimo máximo() funcionar con valores de longitud estática.

En primer lugar, podemos utilizar mínimo máximo() solo para una columna de rejilla y defina el ancho de las otras columnas como valores estáticos simples (píxeles aquí).

 rejilla-plantilla-columnas: minmax (100px, 200px) 200px 200px; 

En la siguiente demostración gif, puedes ver que este diseño es no responde, sin embargo la primera columna tiene un poco de flexibilidad. La segunda y la tercera columnas conservan su ancho fijo (200 px) mientras que la primera columna varía de 100 px a 200 px, Basado en el espacio disponible..

En segundo lugar, podemos definir el ancho de más de una columna de cuadrícula utilizando mínimo máximo(). Los valores mínimo y máximo son ambos estáticos, por lo que, de forma predeterminada, la cuadrícula es no responde. Sin embargo, las columnas en sí son flexible, pero solo entre 100px y 200px. Ellos crecer y encogerse simultáneamente a medida que cambiamos el tamaño de la ventana gráfica.

 cuadrícula-plantilla-columnas: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Tenga en cuenta que también podemos utilizar el repetir() función junto con mínimo máximo(). Por lo tanto, el fragmento de código anterior también puede escribirse así:

 cuadrícula-plantilla-columnas: repetir (3, minmax (100px, 200px)); 

Valores dinámicos de longitud

Aparte de los valores estáticos, el mínimo máximo() la función también acepta unidades porcentuales y el nueva unidad de fracción (fr) como argumentos Al usarlos, podemos lograr grillas personalizadas que son ambas sensible y cambiar sus dimensiones segun el espacio disponible.

El siguiente código da como resultado una cuadrícula en la que el ancho de la primera columna oscila entre el 50% y el 80% mientras que el segundo y el tercero compartir uniformemente el espacio restante.

 rejilla-plantilla-columnas: minmax (50%, 80%) 1fr 1fr; 

Cuando usamos valores dinámicos con el mínimo máximo() función, es crucial para configurar una regla que tiene sentido. Déjame mostrarte un ejemplo donde el rejilla se cae:

 cuadrícula-plantilla-columnas: minmax (1fr, 2fr) 1fr 1fr; 

Esta regla no tiene ningún sentido, ya que el navegador es incapaz de decidir qué valor asignar a la mínimo máximo() función. El valor mínimo llevaría a una 1fr 1fr 1fr ancho de columna, mientras que el máximo de 2fr 1fr 1fr. Pero, ambos son posibles incluso en una pantalla muy pequeña. Hay nada que el navegador pueda relacionar.

Aquí está el resultado:

Combina valores estáticos y dinámicos.

También es posible Combina valores estáticos y dinámicos.. Por ejemplo, en la demostración de Codepen anterior, usé el minmax (100px, 200px) 1fr 1fr; regla que se traduce en una cuadrícula donde la primera columna oscila entre 100px y 200px y el espacio restante es compartidos equitativamente entre los otros dos.

 cuadrícula-plantilla-columnas: minmax (100px, 200px) 1fr 1fr; 

Es interesante observar que a medida que la ventana gráfica crece, primero, la primera columna crece de 100px a 200px. Los otros dos, regidos por la unidad fr, comienzan a crecer. Solo después de que el primero alcanzó su ancho máximo.. Esto es lógico, ya que el objetivo de la unidad de fracción es dividir el espacio disponible (restante).

los contenido mínimo, contenido máximo, y auto palabras clave

Hay una tercer tipo de valor podemos asignar a la mínimo máximo() función. los contenido mínimo, contenido máximo, y auto Las palabras clave relacionan las dimensiones de una pista de cuadrícula con la contenido que contiene.

contenido máximo

los contenido máximo palabra clave dirige el navegador que la columna de la cuadrícula debe ser tan ancho como el elemento más ancho que contiene.

En la siguiente demostración, coloqué un Imagen de 400px de ancho Dentro de la primera pista de cuadrícula, y se utilizó la siguiente regla CSS. (Puede encontrar una demostración de Codepen con el código modificado completo al final del artículo):

 .container grid-template-columns: max-content 1fr 1fr; / ** * Lo mismo con la notación minmax (): * grid-template-columns: minmax (max-content, max-content) 1fr 1fr; * / 

No he usado mínimo máximo() Notación todavía, pero en el comentario de código anterior puedes ver cómo se vería el mismo código con eso (aunque aquí es superfluo).

Como puede ver, la primera columna de la cuadrícula es tan ancha como su elemento más ancho (aquí la imagen). De esta manera, los usuarios siempre pueden ver la imagen. en tamaño completo. Sin embargo, bajo un cierto tamaño de ventana gráfica, este diseño es no responde.

contenido mínimo

los contenido mínimo palabra clave indica al navegador que la columna de la cuadrícula debe ser tan ancha como la elemento más estrecho que contiene, de manera que no conduce a un desbordamiento.

Veamos cómo se ve la demostración anterior con la imagen si cambiamos el valor de la primera columna a contenido mínimo:

 .container grid-template-columns: min-content 1fr 1fr; / ** * Lo mismo con la notación minmax (): * grid-template-columns: minmax (contenido mínimo, contenido mínimo) 1fr 1fr; * / 

Dejé el fondo verde debajo de la imagen para que pueda ver el tamaño completo de la primera celda de la cuadrícula.

Como puede ver, la primera columna conserva el ancho más pequeño que Se puede lograr sin un desbordamiento.. En este ejemplo, esto se definirá por el ancho mínimo de las celdas de cuadrícula 4 y 7, que se deriva de relleno y tamaño de fuente Propiedades, como la imagen en la primera celda. podría reducirse a cero sin un desbordamiento.

Si la celda de la cuadrícula contiene una cadena de texto, contenido mínimo sería igual al ancho de la palabra más larga, ya que es el elemento más pequeño que no puede reducirse más sin un desbordamiento. Aquí hay un gran artículo de BitsOfCode donde puedes ver cómo contenido mínimo y contenido máximo comportarse cuando la celda de la cuadrícula contiene una cadena de texto.

Utilizando contenido mínimo y contenido máximo juntos

Si nosotros utilizar contenido mínimo y contenido máximo juntos dentro de mínimo máximo() Función obtenemos una columna de cuadrícula que:

1. es sensible
2. no tiene ningún desbordamiento
3. no crece más ancho que su elemento más ancho

 .container grid-template-columns: minmax (contenido mínimo, contenido máximo) 1fr 1fr;  

También podemos utilizar el contenido mínimo y contenido máximo palabras clave junto con otros valores de longitud dentro de mínimo máximo() Función, hasta que la regla tenga sentido. Por ejemplo, minmax (25%, contenido máximo) o minmax (contenido mínimo, 300 px) Serían ambas reglas válidas.

auto

Finalmente, también podemos utilizar el auto palabra clave como argumento de la mínimo máximo() función.

Cuando auto es utilizado como máximo, su valor es idéntico a contenido máximo.

Cuando es utilizado como mínimo, su valor es especificado por el min-ancho / min-altura regla, lo que significa que auto a veces es idéntico a contenido mínimo, pero no siempre.

En nuestro ejemplo anterior, contenido mínimo hace igual a auto, como el ancho mínimo de la primera columna de la cuadrícula es siempre más pequeño que su altura mínima. Entonces, la regla CSS que pertenece:

 .container grid-template-columns: minmax (contenido mínimo, contenido máximo) 1fr 1fr;  

También podría escribirse así:

 .container grid-template-columns: minmax (auto, auto) 1fr 1fr;  

los auto palabra clave también puede ser Utilizado junto con otras unidades estáticas y dinámicas. (píxeles, unidad de fr, porcentajes, etc.) dentro de la mínimo máximo() función, por ejemplo minmax (auto, 300px) seria una regla valida.

Puedes probar como contenido mínimo, contenido máximo, y auto palabras clave trabajan con el mínimo máximo() Funciona en la siguiente demo de Codepen: