Container Queries 2026: Diseño de Componentes Listo para Producción

Por Jorge Saud · 2 de enero de 2026

Container Queries: Completamente Maduros en 2026

En 2023, container queries estaban “recién disponibles.” En 2026, están listos para producción con 95%+ de soporte global de navegadores. No más advertencias, no más fallbacks necesarios para la mayoría de casos.

Esta nota cubre qué ha cambiado y los patrones avanzados que ahora puedes usar con confianza.

Estado del Soporte de Navegadores

Soporte global: ~96% (Can I Use, Ene 2026)

Ahora puedes usar container queries sin detección de características o fallbacks para la mayoría de audiencias.

El Concepto Central (Repaso Rápido)

/* 1. Definir el contenedor */
.card-wrapper {
  container: card / inline-size;
}

/* 2. Consultar el contenedor */
@container card (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Los componentes responden a su contenedor, no al viewport. Este es el cambio fundamental respecto a @media queries.

Qué Hay de Nuevo en 2026

Style Queries (Ahora Estables)

Consulta valores CSS calculados, no solo dimensiones:

/* Define una propiedad personalizada */
.theme-wrapper {
  container-name: theme;
  --theme: light;
}

/* Consulta el estilo */
@container theme style(--theme: dark) {
  .card {
    background: #1a1a1a;
    color: white;
  }
}

Style queries permiten tematización sin alternar clases o JavaScript.

Unidades de Container Query

Unidades de tamaño relativas al contenedor consultado:

.responsive-text {
  font-size: clamp(1rem, 4cqi, 2rem);
  /* La fuente escala con el contenedor, no el viewport */
}

Patrones de Producción

Patrón 1: Cards Autocontenidas

Cards que se adaptan donde sea que se coloquen:

.card-container {
  container: card / inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container card (width > 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card-image {
    flex: 0 0 40%;
  }
}

@container card (width > 500px) {
  .card {
    padding: 2rem;
  }

  .card-title {
    font-size: 1.5rem;
  }
}

Patrón 2: Navegación Responsiva

Navegación que se adapta a ubicación en sidebar o header:

.nav-container {
  container: nav / inline-size;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@container nav (width > 600px) {
  .nav-links {
    flex-direction: row;
    gap: 2rem;
  }

  .nav-label {
    display: inline; /* Mostrar etiquetas cuando hay espacio */
  }
}

Patrón 3: Adaptación de Items de Grid

Items de grid que se adaptan al tamaño de su celda:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-item {
  container: item / inline-size;
}

@container item (width < 300px) {
  .item-content {
    /* Layout compacto */
    padding: 0.5rem;
  }

  .item-description {
    display: none;
  }
}

@container item (width >= 300px) {
  .item-content {
    /* Layout completo */
    padding: 1.5rem;
  }
}

Style Queries en Práctica

Cambio de Tema

:root {
  --color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-scheme: dark;
  }
}

.themed-section {
  container-name: themed;
}

@container themed style(--color-scheme: dark) {
  .content {
    background: #0a0a0a;
    color: #fafafa;
  }
}

Feature Flags

.feature-wrapper {
  container-name: features;
  --show-premium: false;
}

.feature-wrapper.premium {
  --show-premium: true;
}

@container features style(--show-premium: true) {
  .premium-badge {
    display: block;
  }

  .premium-features {
    opacity: 1;
  }
}

Combinando con Otro CSS Moderno

Con CSS Nesting

.card-container {
  container: card / inline-size;

  .card {
    display: flex;
    flex-direction: column;

    @container card (width > 400px) {
      flex-direction: row;
    }
  }
}

Con Subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid-item {
  container: item / inline-size;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;

  @container item (width > 250px) {
    /* Expandir contenido cuando el item tiene espacio */
  }
}

Consideraciones de Rendimiento

Container queries están altamente optimizados en navegadores 2026:

1. Containment de layout es automático - No se necesita trabajo extra
2. Renderizado incremental - Solo los contenedores afectados re-renderizan
3. Acelerado por hardware - Optimizado para GPU en todos los navegadores principales

Tips:

• Preferir inline-size sobre size (evita problemas de containment de altura)
• No anidar contenedores más de 2-3 niveles de profundidad
• Usar unidades de container query para sizing fluido

Migración desde Media Queries

Antes (basado en viewport):

@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

Después (basado en contenedor):

.card-wrapper {
  container: card / inline-size;
}

@container card (width > 400px) {
  .card {
    flex-direction: row;
  }
}

El componente ahora funciona en cualquier contexto - sidebar, modal, contenido principal.

Puntos Clave

1. Listo para producción - 96% soporte de navegadores, no se necesitan fallbacks
2. Style queries - Consulta valores CSS, no solo dimensiones
3. Unidades de contenedor - cqi, cqw para sizing relativo al contenedor
4. Pensamiento de componentes - Componentes poseen su comportamiento responsivo
5. Sin JavaScript - Adaptación de componentes con CSS puro

Container queries cambian fundamentalmente cómo construimos interfaces responsivas. En 2026, no hay razón para no usarlos en cada componente que necesite adaptarse a su contexto.