El posicionamiento de elementos HTML en una página web es una parte crucial en el proceso de diseño. Un buen posicionamiento le da orden a un sitio web, guía la mirada del usuario y mejora la navegación. Por ello, CSS cuenta con varios sistemas de posicionamiento de elementos que nos permiten crear diseños complejos de distintas maneras.
CSS Grid es uno de los sistemas de posicionamiento avanzado que tiene CSS y, al igual que todo en este lenguaje, funciona con la inserción de propiedades que nos permiten modificar las características de los elementos. En esta ocasión, te presentamos las funciones repeat y minmax de CSS Grid, dos palabras clave muy útiles a la hora de crear nuestra cuadrícula CSS.
¿Qué hacen las funciones repeat y minmax de CSS Grid?
Las funciones repeat y minmax de CSS Grid son palabras clave que podemos insertar en aquellas propiedades que nos permiten determinar el tamaño de las columnas o filas de nuestra cuadrícula: grid-template-columns y grid-template-rows. Estas funciones nos permiten simplificar ciertas acciones a la hora de crear cuadrículas más extensas.
Aunque puede que en cuadrículas pequeñas el uso de las unidades de medida absolutas y relativas, junto con la propiedad grid-auto, sean suficientes, hay formas más simples de crear las mismas cuadrículas con menos líneas de código. Esto nos permitirá tener un código eficiente y una página web más fácil de modificar.
A continuación, te explicamos qué hace cada una de las funciones repeat y minmax de CSS Grid:
<repeat>
La función repeat, como su nombre indica, nos permite decirle al navegador que repita las características de tamaño de una columna o fila en varias columnas o filas. Esto nos evita el hecho de tener que crear patrones con las propiedades grid-auto o tener que repetir el mismo valor una y otra vez en las propiedades grid-template.
Entonces, ¿cómo se escribe? Pues es muy sencillo. Si quieres, por ejemplo, determinar tres columnas de un mismo tamaño usando píxeles, podrías escribir la línea de código como se muestra a continuación:
# Funciones repeat y minmax de CSS Grid
# css repeat
grid-template-columns: repeat (3, 200px)Al ser una palabra clave como cualquier otra, puedes utilizar la función repeat combinada con otras. Entonces, puedes definir que la primera columna será de 400px, pero que después quieres siete columnas de 200px. Esto lo puedes hacer escribiendo la siguiente línea de código:
# Funciones repeat y minmax de CSS Grid
# grid repeat fr
grid-template-columns: 400px repeat (7, 200px).Usando la función repeat, puedes determinar el tamaño de varios tracks, sean filas o columnas, insertando el número que desees y usando las unidades de medida CSS (positivas) que quieras. Recuerda que en todas las propiedades de CSS Grid también puedes usar la unidad de medida relativa fr.
Para saber más sobre esta función, los soportes de navegador que tiene y ver algunos ejemplos, te sugerimos leer la página oficial de la Mozilla Developer Network sobre la función repeat en CSS.
<minmax>
Las funciones repeat y minmax de CSS Grid nos permiten jugar con los tamaños de las columnas y filas en la cuadrícula. En el caso de la propiedad minmax, esta nos permite establecer un tamaño mínimo y un tamaño máximo para las columnas o filas de nuestro grid.
Esto lo podemos hacer insertando la palabra clave minmax en las propiedades grid-template y definiendo sus valores entre paréntesis. Algo muy interesante de esta función es que estos valores pueden tener unidades de medida CSS distintas.
Además, podemos usar esta palabra clave mezclada con la palabra clave repeat para otorgar máximos y mínimos a varios tracks a la vez. Podemos, por ejemplo, escribir la siguiente línea de código:
# Funciones repeat y minmax de CSS Grid
# grid min
grid-template-columns: repeat (2, minmax (200px, 1fr))La línea de código anterior quiere decir que queremos dos columnas repetidas, con las mismas características, que tengan un mínimo de 200px y un máximo de 1fr. Esto determinará que, cuando la pantalla cambie de tamaño, los demás elementos con características flexibles tendrán que ajustarse para que las columnas siempre tengan 200px de ancho, como mínimo. El máximo en este caso es una unidad relativa, entonces las columnas estarán en constante cambio dependiendo del ancho del viewport.
Si tienes dudas sobre esta unidad, te invitamos a que leas nuestro post sobre la medida fr en CSS.
Al igual que con la función anterior, te invitamos a leer el post de la Mozilla Developer Network sobre la función minmax.
Ahora que sabes que puedes modificar muchos aspectos de la cuadrícula de CSS usando las funciones repeat y minmax de CSS Grid, además de las propiedades para cambiar su tamaño y las distintas unidades de medida de CSS, ¡estás listo para empezar a jugar con tu propia cuadrícula de CSS para posicionar elementos!
En KeepCoding creemos que esta es la mejor manera de prolongar nuestros conocimientos como programadores, pues solo enfrentándonos a nuestras propias líneas de código es que podemos probar nuestras habilidades.
Por ello, te invitamos a participar en nuestro Desarrollo Web Full Stack Bootcamp, donde no solo continuarás aprendiendo sobre los lenguajes de programación para web, sino que, además, los pondrás en práctica creando y diseñando tu propio sitio web. ¿A qué esperas para poner en práctica todos estos nuevos conocimientos sobre desarrollo web? ¡Anímate a vivir esta experiencia e inscríbete!
