Container Query Units en 2026: componentes responsivos sin caos de media queries

El responsive clasico giraba alrededor del viewport. Ese modelo se queda corto en productos con componentes reutilizables dentro de sidebars, cards, widgets y layouts anidados.

Por que muchos equipos ya no dependen solo del viewport

• el mismo componente vive con anchos distintos en una misma pagina
• hay widgets embebidos en CMS
• las cards de dashboard cambian de columna segun el contexto

Todo eso acaba creando overrides, excepciones y media queries cruzadas.

Que cambia con container query units

El componente deja de preguntar por la pantalla completa y empieza a responder al espacio que realmente tiene disponible.

Eso da:

• logica responsive local
• componentes mas portables
• menos choques entre breakpoints globales
• contratos mas claros en la design system

Patron base

.card-grid {
  container-type: inline-size;
}
@container (min-width: 36rem) {
  .card {
    grid-template-columns: 1.2fr 1fr;
    gap: 1.25rem;
  }
}

Plan de migracion

• detectar componentes con demasiados overrides
• migrar por familias
• dejar media queries globales solo para el shell
• documentar las nuevas reglas por componente

Conclusion

Container query units no son una moda. Son una respuesta razonable a la arquitectura moderna basada en componentes.