La unidad fr y repeat
Utilice la unidad fr fraccionaria y la función repeat() para crear pistas de cuadrícula flexibles.
La unidad fr y repeat es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es la unidad fr?
La unidad fr (fraccionaria) es exclusiva de CSS Grid. Representa una fracción del espacio libre restante en el contenedor de la cuadrícula, después de definir el tamaño de todas las pistas no flexibles.
Ejemplo sencillo de fr
Dos columnas iguales, cada una con la mitad del espacio disponible:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Column 1 (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Column 2 (1fr)</div>
</div>Pistas mixtas
El espacio de fr se calcula después de restar las pistas fijas:
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px sidebar</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>Fracciones desiguales
Los distintos valores de fr crean columnas proporcionales:
<div class="thirds" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">25% (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">50% (2fr)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">25% (1fr)</div>
</div>La función repeat()
repeat() evita repetir el mismo tamaño de pista. El primer argumento es la cantidad de repeticiones; el segundo es el tamaño de la pista.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
</div>repeat() con pistas mixtas
Puede repetir un patrón de pistas:
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">2fr</div>
</div>auto-fill
repeat(auto-fill, ...) crea tantas columnas como quepan en el contenedor con el tamaño indicado. Las pistas vacías se conservan al final.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">200px</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">200px</div>
</div>auto-fit
repeat(auto-fit, ...) funciona como auto-fill, pero contrae las pistas vacías, lo que permite que los elementos existentes se expandan para llenar el contenedor.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">min 200px, grows</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">min 200px, grows</div>
</div>minmax() en repeat
minmax(min, max) define un intervalo de tamaños para una pista. Combinado con auto-fit, crea una cuadrícula adaptable sin consultas de medios:
<div class="responsive-grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Card A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Card B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Card C</div>
</div>fr frente a porcentaje
A diferencia de los porcentajes, fr excluye automáticamente el espacio de separación. 1fr 1fr con un espacio de 24px produce dos columnas iguales sin necesidad de cálculos. El cálculo equivalente con porcentajes sería calc(50% - 12px).
fr con min-content y max-content
Combine fr con tamaños basados en el contenido para crear diseños mixtos:
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Label</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Flexible content area</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Action</div>
</div>Comprobación rápida
¿Qué crea repeat(auto-fit, minmax(200px, 1fr))?
Repaso
La unidad fr distribuye proporcionalmente el espacio restante de la cuadrícula. repeat() evita declarar pistas repetitivas. El potente patrón repeat(auto-fit, minmax(250px, 1fr)) crea cuadrículas de tarjetas totalmente adaptables sin necesidad de consultas de medios.
Preguntas frecuentes
¿La lección «La unidad fr y repeat» es gratis?
Sí — el texto completo de «La unidad fr y repeat» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «La unidad fr y repeat»?
Utilice la unidad fr fraccionaria y la función repeat() para crear pistas de cuadrícula flexibles. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «La unidad fr y repeat»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Display Grid y columnas y filas de plantilla
- La unidad fr y repeat
- Gap y colocación en la cuadrícula
- Áreas de plantilla de la cuadrícula