Cómo utilizar la función CSS Grid repetición() — SitePoint

En este artículo, exploraremos todas las posibilidades de la función CSS Grid repetición(), que nos permite crear eficientemente patrones de columnas y filas de Grid, e incluso crear diseños responsivos sin consultas de medios.

Las propiedades grid-template-columns y grid-template-rows nos permiten establecer explícitamente el número de filas y columnas que queremos en una cuadrícula, y especificar cómo deben dimensionarse. Esto puede volverse repetitivo si queremos que varias filas y/o columnas tengan el mismo tamaño.

La función repetir() puede salvarnos de tener que repetirnos. Por ejemplo, podríamos encontrarnos escribiendo esto:

En su lugar, podemos escribir esto:

En el ejemplo anterior, la función repetir() nos permite especificar cuántas columnas queremos (5) y qué tamaño deben tener todas (1fr, o una fracción del espacio disponible).

Esto hace que nuestro código sea más eficiente y más fácil de leer. Y este es sólo un ejemplo sencillo. Como veremos a continuación, hay mucho más que podemos hacer con la función repetir().

El siguiente Pen muestra una demostración simple del código anterior. Un artículo que contiene diez divs está organizado en cinco columnas.

Vea la repetición de Pen CSS Grid(): 5 columnas simples de SitePoint (@SitePoint) en CodePen.

De hecho, podemos hacer muchas cosas dentro del paréntesis de repetir(). Se necesitan dos argumentos, separados por una coma. El primero representa el “recuento” y el segundo representa las “pistas”: repetir(, ). (La palabra "pista" es un nombre genérico para una columna o fila).

ElcontarEl argumento puede ser una de tres cosas:

Claramente, un valor numérico establece un número específico de pistas. Pero el ajuste y el relleno automáticos permiten un número variable de pistas según el espacio disponible. Esto los hace muy útiles para diseños responsivos sin consultas de medios. Los exploraremos en detalle a continuación.

Elpistas El argumento especifica las pistas que se repetirán. Estas son las opciones para este argumento:

Como puede ver, hay muchas opciones posibles para este argumento y pueden empezar a parecer un poco confusas, especialmente cuando se combinan varias de ellas. Intentaremos mantener las cosas bastante simples aquí para no perdernos en la maleza. En la mayoría de las circunstancias, el argumento de las pistas es bastante simple e intuitivo.

Antes de explorar los diversos argumentos que se pueden usar con repetir(), vale la pena señalar que repetir() se puede usar para crear patrones de columnas.

Por ejemplo, considere este código “manuscrito” para una cuadrícula de seis columnas:

Podemos reescribir esto así, usando repetir():

Esto le indica al navegador que repita un patrón tres veces: una columna de 1 fr de ancho, seguida de una columna de 2 fr de ancho. La siguiente demostración muestra esto en acción.

Consulte la repetición de Pen CSS Grid(): patrones de columnas de SitePoint (@SitePoint) en CodePen.

Ya hemos visto un valor de longitud de 1fr usado con repetir(). La ventaja de la unidad fr es que dimensiona las vías según el espacio disponible sin que tengamos que preocuparnos de cuánto espacio hay disponible. Pero también podemos utilizar otras unidades de longitud cuando las necesitemos.

Por ejemplo, configuremos tres pistas de columnas y démosles un ancho de 120 píxeles:

La siguiente demostración de CodePen muestra el resultado.

Consulte la repetición de Pen CSS Grid(): valores de longitud de SitePoint (@SitePoint) en CodePen.

Las columnas ahora tienen un ancho fijo, que no cambiará incluso si el contenedor es demasiado estrecho. Intente jugar con el ancho del navegador en el Lápiz de arriba. Intente también intercambiar píxeles por otras unidades de longitud, como 5 em, 10 canales, 15 %, etc., para ver su efecto.

La palabra clave min-content establece que una pista sea tan ancha o alta como su contenido mínimo. En la siguiente demostración, tenemos tres columnas, cada una de las cuales está configurada con contenido mínimo, por lo que cada columna es tan ancha como la palabra más larga que contiene:

Consulte la repetición de Pen CSS Grid(): contenido mínimo de SitePoint (@SitePoint) en CodePen.

La palabra clave max-content básicamente hace lo opuesto a min-content: basa el tamaño de la pista en la mayor cantidad de contenido en una celda de la cuadrícula. En la siguiente demostración, los anchos de las columnas se basan en la celda con la mayor cantidad de contenido:

Consulte la repetición de Pen CSS Grid(): contenido máximo de SitePoint (@SitePoint) en CodePen.

Cuando se usa con repetir(), la palabra clave auto alcanza el máximo en contenido máximo y el mínimo en contenido mínimo.

Considere el siguiente patrón de columnas:

Aquí, tendremos seis columnas, cada una con números impares configuradas con un ancho de auto. En la demostración de CodePen a continuación, podemos ver que, donde hay suficiente espacio, los divs con texto "automático" alcanzan el máximo contenido máximo y los divs 1fr comparten el espacio restante. A medida que el navegador se estrecha, las columnas automáticas continúan estrechándose hasta alcanzar el umbral de contenido mínimo.

Vea la repetición de Pen CSS Grid(): auto de SitePoint (@SitePoint) en CodePen.

En la demostración anterior, los divs solo comienzan a desbordar el contenedor una vez que cada columna ha alcanzado su umbral de contenido mínimo. (Es decir, el texto no puede ajustarse más).

Nota: auto solo parece comportarse como se describe anteriormente cuando se mezcla con otros valores. Por sí solo, como repetir(3, auto), se comporta igual que si estuviésemos configurando repetir(3, 1fr).

La función minmax() toma dos argumentos propios: un valor mínimo y máximo, separados por una coma. Entonces, con minmax(), podemos establecer un rango de tamaños posibles para pistas en un entorno flexible.

Por ejemplo, podríamos establecer una columna en minmax(40px, 100px), lo que significa que su ancho mínimo posible es 40px y su ancho máximo posible es 100px.

Ambos argumentos de minmax() pueden tomar valores de longitud como fr, px, em, % y ch, así como min-content, max-content y auto. Sin embargo, es mejor usar un valor de longitud para al menos un argumento, ya que se supone que las palabras clave no funcionan como ambos argumentos (aunque encuentro que esto a veces funciona, como minmax(min-content, max-content)).

El siguiente código establece cinco columnas, cada una con un ancho mínimo de 60 px y un ancho máximo de 1 fr:

Vea la repetición de Pen CSS Grid(): minmax() de SitePoint (@SitePoint) en CodePen.

Esto funciona bien hasta que se alcanza el ancho mínimo de 60 px. Después de ese punto, el contenido comienza a salirse de su contenedor. Veremos cómo conseguir un mejor resultado pronto.

La función minmax() también puede tener la función min() o max() como argumento. Ambos toman dos valores. La función min() aplica el valor menor de sus dos valores, y la función max() aplica el valor mayor. Esto es útil en entornos responsivos.

Por ejemplo:

Consulte la función Pen CSS Grid repetición(): minmax() con min() de SitePoint (@SitePoint) en CodePen.

El código anterior establece cinco columnas. En navegadores anchos, las cinco columnas estarán todas espaciadas equidistantemente en 1fr. En dispositivos más estrechos, las columnas se volverán cada vez más estrechas. Dejarán de encogerse una vez que alcancen el valor más bajo entre 60px y 8vw. Por lo tanto, todavía podemos encontrarnos con contenido colgando del contenedor en pantallas estrechas; Aún queda mucho por hacer para ser completamente receptivo.

Si encuentra que la combinación de minmax(), min() y max() es un poco decepcionante en esta etapa, espere, ya que su poder real se verá a continuación cuando nos reunamos con el autoajuste y el autocompletado.

La función fit-content() toma un único argumento, que representa el tamaño máximo que puede alcanzar una pista. Entonces la pista puede ser flexible hasta ese punto. fit-content() puede tomar cualquier valor de longitud, como fr, px, em, % y ch.

Por ejemplo, si configuramos tres columnas y ajustamos contenido (120 px), los anchos de las columnas responderán hasta un ancho de 120 px:

Vea la repetición de Pen CSS Grid(): fit-content() de SitePoint (@SitePoint) en CodePen.

En el diseño de cuadrícula, las líneas verticales y horizontales alrededor de las pistas están numeradas de forma predeterminada. Al configurar columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula, podemos dar nombres a esas líneas. Esto hace que sea más fácil apuntar a esas líneas al colocar contenido en la cuadrícula (ya que no tenemos que entrar y contar las líneas de la cuadrícula).

He aquí un ejemplo sencillo. Las líneas nombradas son los bits entre corchetes ([]):

El código anterior nos da dos columnas. La línea de cuadrícula vertical más a la izquierda (número 1) se llama "barra lateral", la línea de cuadrícula central (número 2) se llama "inicio de contenido" y la línea de cuadrícula final (número 3) se llama "fin de contenido".

También podemos usar líneas con nombre dentro de nuestra función repetir():

Esto significa que cada una de nuestras columnas ahora tiene una línea a la izquierda llamada yin y una línea a la derecha llamada yang.

Nombrar líneas dentro de repetir() es principalmente útil cuando repetir() se mezcla con otros valores, así:

No profundizaré en las líneas con nombre y cómo usarlas aquí, ya que es un tema aparte, pero puedes leer más sobre las líneas de cuadrícula con nombre en MDN.

Las palabras clave de ajuste automático y autocompletar son alternativas a la configuración de un número fijo de pistas. Le dicen al navegador que coloque tantas pistas en un espacio determinado como sea posible. Por ejemplo:

Vea la repetición de Pen CSS Grid(): ajuste automático y autocompletar por SitePoint (@SitePoint) en CodePen.

En la demostración anterior, los divs se configuran con un ancho de 150 px, y aquellos que no caben en una línea pasan a la siguiente. Si cambiamos el ajuste automático por el autocompletar, no veremos ninguna diferencia, porque en estas condiciones ambos hacen lo mismo. Las diferencias entre ellos sólo se hacen evidentes en circunstancias especiales.

En este punto, el ajuste automático y el autocompletar están bien, pero nada especialmente parpadeante. Es cuando se combinan con minmax() y min() que comienza a ocurrir la verdadera magia, así que veamos eso a continuación.

Si aún no estás enamorado de repetir(), la combinación de repetir() con ajuste automático, minmax() y min() seguramente hará que la flecha de Cupido atraviese tu obstinado corazón. Su combinación nos permite crear diseños verdaderamente responsivos sin el uso de consultas de medios.

Considere el siguiente CSS:

En este ejemplo, minmax() establece un ancho de columna mínimo de 200 px y un máximo de 1 fr. La siguiente demostración muestra esto en acción.

Consulte la repetición de Pen CSS Grid(): ajuste automático y minmax() de SitePoint (@SitePoint) en CodePen.

Cada div debe tener al menos 200 píxeles de ancho. Si hay espacio adicional a la derecha (menos de 200 píxeles), los divs se expanden para llenar el espacio. Si ampliamos el navegador, se agrega otro div a la fila una vez que haya otros 200 píxeles de espacio disponibles. Lo mismo sucede a la inversa: a medida que estrechamos el navegador, el último div de la fila caerá una vez que no haya al menos 200 píxeles de espacio para que quepa. Y una vez que ha caído, los divs restantes se expanden para llenar la fila.

Nuevamente, si cambiamos el ajuste automático por el autocompletar, veremos el mismo comportamiento.

Sin embargo, este ejemplo tiene una limitación. Si hacemos que la ventana del navegador sea lo suficientemente estrecha, terminaremos con una sola columna. A medida que esa columna se vuelve más estrecha que 200 px, los divs comenzarán a desbordar su contenedor.

Podemos evitar que ocurra este desbordamiento incorporando min() a la mezcla, así que veamos eso a continuación.

Podemos controlar lo que sucede en anchos pequeños introduciendo min(). Actualicemos nuestro código para que se vea así:

Ahora hay dos opciones para el ancho mínimo de columna. El navegador elegirá el que sea más pequeño. Una vez que la columna es inferior a 200 px, 100% es el valor más pequeño, por lo que prevalece. Y esto significa que la única columna restante ahora está configurada en ancho: 100%, por lo que seguirá encajando bien en su contenedor con anchos cada vez menores. (Apriete la ventana del navegador hacia abajo lo más que pueda para ver esto en la práctica).

Vea la repetición de Pen CSS Grid(): minmax() y min() de SitePoint (@SitePoint) en CodePen.

Para ver una demostración más real del uso de repetir() con ajuste automático, minmax() y min(), consulte la siguiente demostración de CodePen de una galería de imágenes responsiva. Esta demostración también utiliza la propiedad de relación de aspecto, que cubrimos en Cómo utilizar la relación de aspecto de CSS.

Vea la galería de imágenes adaptables a lápiz usando la relación de aspecto de SitePoint (@SitePoint) en CodePen.

En los ejemplos que hemos visto hasta ahora, no parece haber diferencia alguna entre ajuste automático y autocompletar. La diferencia sólo aparece en determinadas situaciones, que cubriremos brevemente ahora.

Eliminaremos nuestro HTML de demostración para que solo haya cuatro divs y configuraremos el siguiente CSS:

La siguiente imagen muestra lo que obtenemos con el autocompletar.

El navegador calcula cuántos divs podrían caber en el contenedor y les deja espacio. Cada uno de los divs existentes tiene 110 píxeles de ancho, al igual que los espacios de izquierda a derecha.

Pasemos al ajuste automático:

La siguiente imagen muestra lo que obtenemos con el ajuste automático.

Con el ajuste automático, el navegador también calcula el espacio para más divs, pero luego colapsa ese espacio hasta un ancho cero y permite que los divs existentes se expandan para ocupar todo el espacio. En la imagen de arriba, puede ver que la línea de la columna final todavía tiene el número 8. El 8 está apilado sobre las líneas de la cuadrícula 7, 6 y 5.

Entonces, ¿qué vamos a hacer con todo esto? De manera realista, en la mayoría de las circunstancias, si no en todas, vamos a querer usar el ajuste automático, porque a menudo no queremos que el espacio permanezca vacío cuando podríamos usarlo para nuestro contenido.

Puede jugar con el ajuste y el autocompletar automáticos en esta demostración de CodePen. Intente cambiar el ajuste automático por el de autocompletar y amplíe y contraiga el navegador para ver cómo se comportan ambos.

Como se señaló anteriormente, la función repetir() se puede utilizar como parte de una declaración más larga con columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula. La mayoría de los amigos que hemos conocido aquí (unidades de longitud, contenido mínimo, contenido máximo, auto, minmax(), fit-content() y líneas con nombre) funcionan junto con repetir() y también dentro de él. (Puede ver ejemplos de ellos trabajando con columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula en MDN).

Algunas combinaciones no están permitidas para el argumento de pista. Por ejemplo, no podemos usar algo como repetir (autocompletar, 1fr). Las unidades de ajuste automático y flexibles no pueden funcionar juntas, porque necesitamos una medida fija en algún lugar, como minmax(100px, 1fr).

Como hemos visto, la función minmax() puede tener una función min() o max() anidada. También puede contener uno de auto, contenido mínimo, contenido máximo, pero no dos. Por ejemplo, podríamos usar minmax(50px, max-content), pero no minmax(min-content, max-content) (aunque, para ser honesto, descubrí que algunas de estas combinaciones parecen funcionar de todos modos).

La notación repetir() no se puede anidar. Entonces no podemos tener una repetición () dentro de una repetición (). Pero ciertamente podemos tener funciones repetir() una al lado de la otra, como repetir(5, 1fr) 100px repetir(2, 50px).

La función repetir() es una herramienta increíblemente útil para diseñar de manera eficiente patrones repetidos de columnas y filas de la cuadrícula. Se puede utilizar para crear diseños totalmente responsivos sin consultas de medios en una sola línea de código.

En la mayoría de los casos, no necesitarás profundizar demasiado en la maleza con repetir(). Su característica más impresionante se resume en un ejemplo básico como este:

Asegúrate de guardar esa línea de código en tu bolsillo trasero, ya que te resultará muy útil.

Puede obtener más información sobre la función repetir() aquí:

Para obtener una introducción más general al diseño de cuadrícula CSS, consulte Introducción a los diseños de cuadrícula CSS.

Ralph es gerente de producción en SitePoint y corrector de estilo independiente, diseñador web y profesor en Page Affairs.