CSS Container Queries: El Futuro del Responsive Design

3 de enero de 2026
Osman Jimenez
CSS Responsive Design Frontend

Container Queries: La Revolución del CSS Responsive

Las Container Queries han llegado para cambiar fundamentalmente cómo pensamos sobre el diseño responsive. A diferencia de las media queries que responden al viewport, las container queries permiten que los componentes respondan a su propio contenedor, creando componentes verdaderamente modulares y reutilizables.

¿Qué son las Container Queries?

Las Container Queries permiten aplicar estilos basados en el tamaño del contenedor padre de un elemento, no del viewport completo. Esto resuelve uno de los problemas más grandes del diseño responsive: crear componentes que se adapten a cualquier contexto.

Sintaxis Básica

/* Definir un contenedor */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Aplicar estilos basados en el tamaño del contenedor */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
  
  .card-image {
    grid-row: 1 / -1;
  }
}

@container card (max-width: 399px) {
  .card {
    display: block;
  }
  
  .card-image {
    width: 100%;
    margin-bottom: 1rem;
  }
}

Tipos de Container Queries

1. Size Queries (Consultas de Tamaño)

/* Contenedor que responde a cambios de ancho */
.sidebar {
  container-type: inline-size;
}

/* Contenedor que responde a cambios de alto */
.hero-section {
  container-type: block-size;
}

/* Contenedor que responde a ambas dimensiones */
.flexible-grid {
  container-type: size;
}

/* Aplicar estilos basados en diferentes dimensiones */
@container (width > 300px) {
  .navigation {
    flex-direction: row;
  }
}

@container (height > 200px) {
  .content {
    padding: 2rem;
  }
}

@container (width > 500px) and (height > 300px) {
  .complex-layout {
    display: grid;
    grid-template-areas: 
      "header header"
      "sidebar main"
      "footer footer";
  }
}

2. Style Queries (Consultas de Estilo)

/* Contenedor con propiedades de estilo */
.theme-container {
  container-name: theme;
  --theme: dark;
}

/* Aplicar estilos basados en custom properties */
@container theme style(--theme: dark) {
  .button {
    background: #333;
    color: white;
    border: 1px solid #555;
  }
}

@container theme style(--theme: light) {
  .button {
    background: white;
    color: #333;
    border: 1px solid #ddd;
  }
}

Casos de Uso Prácticos

Componente de Tarjeta Adaptable

/* HTML */
<div class="card-container">
  <article class="product-card">
    <img src="product.jpg" alt="Producto" class="product-image">
    <div class="product-info">
      <h3 class="product-title">Producto Increíble</h3>
      <p class="product-description">Descripción del producto...</p>
      <div class="product-actions">
        <button class="btn-primary">Comprar</button>
        <button class="btn-secondary">Favorito</button>
      </div>
    </div>
  </article>
</div>

/* CSS */
.card-container {
  container-type: inline-size;
  container-name: product-card;
}

.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

/* Layout compacto para contenedores pequeños */
@container product-card (max-width: 250px) {
  .product-card {
    text-align: center;
  }
  
  .product-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
  
  .product-info {
    padding: 1rem;
  }
  
  .product-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .product-description {
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .product-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }
}

/* Layout horizontal para contenedores medianos */
@container product-card (min-width: 251px) and (max-width: 450px) {
  .product-card {
    display: flex;
  }
  
  .product-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  .product-info {
    padding: 1rem;
    flex: 1;
  }
  
  .product-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
  }
}

/* Layout expandido para contenedores grandes */
@container product-card (min-width: 451px) {
  .product-card {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 1.5rem;
  }
  
  .product-image {
    width: 200px;
    height: 150px;
    object-fit: cover;
  }
  
  .product-info {
    padding: 1.5rem 0;
  }
  
  .product-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  .product-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
  }
}

Sistema de Grid Adaptable

.grid-container {
  container-type: inline-size;
  container-name: grid;
  display: grid;
  gap: 1rem;
}

/* Grid de 1 columna para contenedores pequeños */
@container grid (max-width: 400px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

/* Grid de 2 columnas para contenedores medianos */
@container grid (min-width: 401px) and (max-width: 800px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Grid de 3 columnas para contenedores grandes */
@container grid (min-width: 801px) and (max-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Grid de 4 columnas para contenedores extra grandes */
@container grid (min-width: 1201px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

Integración con CSS Moderno

Container Queries + CSS Grid

.dashboard {
  container-type: size;
  container-name: dashboard;
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

@container dashboard (width > 768px) and (height > 600px) {
  .dashboard {
    grid-template-areas:
      "header header header"
      "sidebar main aside"
      "footer footer footer";
    grid-template-columns: 250px 1fr 200px;
    grid-template-rows: auto 1fr auto;
  }
}

@container dashboard (width <= 768px) {
  .dashboard {
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    display: none;
  }
}

Container Queries + Custom Properties

.theme-aware-component {
  container-name: themed;
  --primary-color: #007bff;
  --text-color: #333;
  --background: white;
}

@container themed style(--theme: dark) {
  .theme-aware-component {
    --primary-color: #4dabf7;
    --text-color: #f8f9fa;
    --background: #212529;
  }
}

.component-content {
  background: var(--background);
  color: var(--text-color);
  border: 2px solid var(--primary-color);
}

Herramientas y Debugging

DevTools para Container Queries

/* Agregar indicadores visuales para debugging */
@container (min-width: 400px) {
  .debug-container::before {
    content: "Container: >= 400px";
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    z-index: 1000;
  }
}

@container (min-width: 600px) {
  .debug-container::before {
    content: "Container: >= 600px";
    background: green;
  }
}

Polyfill y Soporte

/* Detección de soporte */
@supports (container-type: inline-size) {
  .modern-layout {
    container-type: inline-size;
  }
}

@supports not (container-type: inline-size) {
  /* Fallback usando media queries */
  @media (min-width: 400px) {
    .fallback-layout {
      display: flex;
    }
  }
}

Mejores Prácticas

  1. Usa nombres descriptivos: container-name ayuda con el debugging
  2. Combina con media queries: Para casos donde el viewport importa
  3. Considera el rendimiento: Evita contenedores anidados complejos
  4. Testa en diferentes contextos: Sidebar, modal, grid items
  5. Documenta los breakpoints: Especifica los tamaños de contenedor esperados

Casos de Uso Avanzados

Componentes de Formulario Adaptables

.form-container {
  container-type: inline-size;
  container-name: form;
}

@container form (min-width: 600px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .form-group.full-width {
    grid-column: 1 / -1;
  }
}

@container form (max-width: 599px) {
  .form-row {
    display: block;
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
}

El Futuro de Container Queries

  • Style queries completas: Consultas basadas en cualquier propiedad CSS
  • Container query units: cqw, cqh, cqi, cqb para dimensiones relativas
  • Mejor tooling: Herramientas de desarrollo especializadas
  • Frameworks integration: Soporte nativo en frameworks populares

Conclusión

Las Container Queries representan la evolución natural del diseño responsive, permitiendo crear componentes verdaderamente modulares que se adaptan a cualquier contexto. Con soporte nativo en todos los navegadores modernos, es el momento perfecto para adoptar esta tecnología en tus proyectos.

Esta característica cambia fundamentalmente cómo pensamos sobre el diseño de componentes, moviendo la responsabilidad del responsive design del nivel de página al nivel de componente.

¿Ya has experimentado con Container Queries? ¿Qué casos de uso has encontrado más útiles en tus proyectos?