Las repeticiones y funciones de fracciones en CSS Grid son herramientas poderosas que permiten crear layouts complejos y adaptables de manera eficiente. Entender cómo utilizar repeat() y las unidades de fracción (fr) te ayudará a diseñar cuadrículas flexibles y responsivas.

Función repeat()

La función repeat() permite definir patrones repetitivos en la cuadrícula sin necesidad de especificar manualmente cada pista. Es especialmente útil cuando necesitas crear columnas o filas de igual tamaño.

Sintaxis Básica

La sintaxis básica de repeat() es:

css

Ejemplo Simple

css

Uso Avanzado de repeat()

Repeticiones Automáticas con auto-fill y auto-fit

• auto-fill: Llena el contenedor con tantas pistas como sea posible, dejando espacio vacío si queda algo.
• auto-fit: Llena el contenedor con tantas pistas como sea posible, estirando las pistas para llenar todo el espacio disponible.

css

[Placeholder: Imagen mostrando el comportamiento de auto-fill y auto-fit]

Función minmax()

La función minmax() permite definir un tamaño mínimo y máximo para las pistas, haciendo la cuadrícula más adaptable.

Ejemplo con minmax()

css

[Placeholder: Imagen mostrando una cuadrícula utilizando minmax() para ajustar el tamaño de las columnas]

Unidades de Fracción (fr)

La unidad de fracción (fr) es especialmente útil para distribuir el espacio disponible en la cuadrícula de manera proporcional.

Ejemplo Simple con fr

css

[Placeholder: Imagen mostrando una cuadrícula con columnas proporcionales usando fr]

Combinación de repeat(), minmax(), y fr

Combinar estas funciones te permite crear layouts aún más complejos y flexibles.

Ejemplo Completo

css

Ejemplo Completo en HTML

html

En este ejemplo, repeat() se combina con minmax() y fr para crear una cuadrícula flexible y adaptable que ajusta automáticamente las columnas y filas según el tamaño del contenedor y el contenido.

Conclusión

Las funciones de repetición y fracción en CSS Grid son esenciales para crear diseños adaptables y elegantes. Al dominar repeat(), minmax(), y fr, podrás construir cuadrículas que se ajusten a cualquier tipo de contenido y dispositivo, mejorando la experiencia del usuario y la eficiencia del desarrollo.