repeat() y minmax() en Grid
Genere varias pistas de grid y defina rangos de tamaños flexibles mediante repeat() y minmax().
repeat() y minmax() en Grid es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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.
repeat() en el contexto de Grid
repeat(count, track-size) es una función de CSS Grid que genera varias definiciones de tracks sin repetirlas manualmente. Funciona dentro de grid-template-columns y grid-template-rows.
repeat() con cantidad fija
Cree 4 columnas iguales:
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>repeat() con un patrón
Repita un patrón de tracks:
<div class="striped-grid">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</div>minmax() dentro de los tracks
minmax(min, max) define un intervalo de tamaño para un track:
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>auto-fit con minmax()
La receta para un Grid adaptable:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>minmax(min-content, max-content)
Los tamaños de los tracks pueden utilizar palabras clave de tamaño intrínseco:
<div class="labels">
<div>Label</div><div>Value</div>
</div>minmax() en las filas
Utilice minmax() en las filas para permitir una altura determinada por el contenido con un mínimo:
<div class="gallery"><div>1</div><div>2</div></div>fit-content() para columnas
fit-content(max) hace que un track tenga el ancho de su contenido hasta un máximo especificado, como max-content, pero con un límite:
<div class="layout"><div>Sidebar</div><div>Main</div></div>Combinación de repeat() y líneas con nombre
Repita líneas con nombre para acceder individualmente a las columnas mediante su nombre:
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fill con minmax para elementos de tamaño fijo
Cuando los elementos no deben expandirse más allá de su tamaño natural:
<div class="gallery">
<div>1</div><div>2</div><div>3</div>
</div>fr frente a porcentajes en Grid
A diferencia de los porcentajes, las unidades fr tienen en cuenta automáticamente el espacio del gap. repeat(3, 1fr) con gap: 24px proporciona 3 columnas realmente iguales. Con porcentajes sería necesario utilizar calc() para restar el gap.
Comprobación rápida
¿Qué define repeat(3, minmax(100px, 1fr))?
Resumen
repeat(count, track) genera varios tracks sin repetirlos manualmente. minmax(min, max) define intervalos de tamaño flexibles para los tracks. El patrón repeat(auto-fit, minmax(280px, 1fr)) es el Grid adaptable más potente: no requiere media queries y crea columnas adaptables automáticamente. Utilice fit-content(max) para columnas laterales cuyo tamaño dependa del contenido.
Preguntas frecuentes
¿La lección «repeat() y minmax() en Grid» es gratis?
Sí — el texto completo de «repeat() y minmax() en Grid» 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 «repeat() y minmax() en Grid»?
Genere varias pistas de grid y defina rangos de tamaños flexibles mediante repeat() y minmax(). 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 3 de 4.
¿Cuánto tiempo toma la lección «repeat() y minmax() en Grid»?
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
- calc() para cálculos dinámicos
- min(), max() y clamp() para valores fluidos
- repeat() y minmax() en Grid
- color-mix() y sintaxis de color relativa