CSS Academy · Lección

Auto-fit y auto-fill con minmax

Cree automáticamente un número adaptable de columnas mediante auto-fit y auto-fill con minmax().

Auto-fit y auto-fill con minmax 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.

La cuadrícula responsive automática

El patrón más potente de CSS Grid: una cuadrícula totalmente responsive que ajusta automáticamente el número de columnas sin ninguna media query, mediante auto-fit o auto-fill combinados con minmax().

auto-fill

auto-fill llena la fila con tantas columnas como quepan con el tamaño mínimo indicado. Las columnas vacías se conservan como pistas vacías al final.

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

auto-fit

auto-fit funciona como auto-fill, pero colapsa las pistas vacías hasta un ancho de cero. Los elementos existentes se expanden para ocupar el espacio restante.

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

Diferencia entre auto-fill y auto-fit

La diferencia solo importa cuando hay menos elementos de los necesarios para llenar la fila:

auto-fill: las pistas de columnas vacías permanecen y los elementos no se expanden para ocupar todo el espacio
auto-fit: las pistas vacías se colapsan y los elementos se expanden para ocupar todo el ancho disponible

auto-fit con minmax()

El famoso patrón de cuadrícula responsive: los elementos tienen al menos 250px de ancho, crecen para ocupar el espacio y se ajustan automáticamente en nuevas filas:

  <div class="responsive-grid">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Explicación de minmax()

minmax(min, max) define un intervalo de tamaños para una pista. La pista no será menor que min ni mayor que max. Combinado con fr, crea pistas flexibles limitadas por un mínimo.

  <div class="track"><div>Flexible track</div></div>

auto-fill con minmax para elementos fijos

Cuando desea que los elementos tengan un tamaño fijo y que el espacio vacío quede al final:

  <div class="icon-grid">
    <div>&#128295;</div><div>&#9881;</div><div>&#128296;</div>
  </div>

Responsive sin media queries

Esta es la principal ventaja: repeat(auto-fit, minmax(280px, 1fr)) se adapta automáticamente desde una columna en dispositivos móviles hasta tantas columnas como quepan en pantallas más grandes:

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

min() para un minmax más seguro

Evite problemas de diseño en contenedores muy pequeños utilizando min(100%, 280px) como mínimo en lugar de un valor de píxel sin más:

  <div class="grid"><div>Item</div></div>

auto-fill para una alineación similar a masonry

Con auto-fill, las pistas vacías al final mantienen la alineación cuando el número de elementos no es múltiplo del número de columnas, lo que resulta útil para crear cuadrículas uniformes.

Tamaño intrínseco de Grid frente a Flexbox

flex-wrap + flex: 1 1 250px de Flexbox es similar, pero no garantiza que las columnas tengan el mismo ancho: los elementos pueden estirarse de forma desigual. Grid, con minmax, garantiza pistas perfectamente uniformes.

Comprobación rápida

¿Qué valor de grid crea columnas responsive sin media queries al colapsar las pistas vacías para que los elementos ocupen el espacio disponible?

Resumen

repeat(auto-fit, minmax(250px, 1fr)) es el patrón de cuadrícula responsive más potente: no necesita ninguna media query. auto-fit colapsa las pistas vacías para que los elementos llenen la fila. auto-fill conserva las pistas vacías para mantener una alineación uniforme. Combínelo siempre con gap para crear separaciones.

Preguntas frecuentes

¿La lección «Auto-fit y auto-fill con minmax» es gratis?

Sí — el texto completo de «Auto-fit y auto-fill con minmax» 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 «Auto-fit y auto-fill con minmax»?

Cree automáticamente un número adaptable de columnas mediante auto-fit y auto-fill con 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 2 de 4.

¿Cuánto tiempo toma la lección «Auto-fit y auto-fill con minmax»?

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

← Volver a CSS Academy