Container Queries en CSS: Adaptación de Diseño por Contenedor

¿Qué son las Container Queries en CSS?

Las Container Queries permiten adaptar un mismo componente web según el espacio disponible de su contenedor padre. A diferencia de los media queries, con las container queries podemos gestionar el diseño basándonos directamente en el ancho del contenedor específico, brindando mayor flexibilidad.

¿Cómo configurar Container Queries con un nombre personalizado?

Usar nombres personalizados facilita activar estilos especialmente diseñados para componentes específicos.

Para nombrar tu contenedor utiliza la propiedad container-name, por ejemplo:

.tarjeta-contenedor {
  container-name: tarjeta;
}

Luego establece la consulta:

@container tarjeta (min-width: 350px) {
  /* estilos aquí */
}

¿Cómo aplicar Container Queries para variar entre diseños verticales y horizontales?

Inicialmente, configurarás el diseño en vertical usando flex-direction column y adaptarás el componente horizontalmente cuando el ancho del contenedor sea suficiente:

/* Por defecto */
.producto-tarjeta {
  display: flex;
  flex-direction: column;
}

/* Container query para 350px */
@container tarjeta (min-width: 350px) {
  .producto-tarjeta {
    flex-direction: row;
  }

  .producto-tarjeta img {
    width: 40%;
  }
}

Esto transforma una disposición inicialmente vertical en una horizontal de forma dinámica según cada contenedor.

¿De qué forma personalizar más componentes según diferentes tamaños del contenedor?

Para tamaños mayores, continuaremos ajustando con otra query adicional, logrando así que ciertos estilos ocupen mejor el espacio disponible:

@container tarjeta (min-width: 500px) {
  .producto-tarjeta img {
    width: 30%;
    aspect-ratio: 1.3;
  }

  .product-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

En este caso específico, adaptaremos mejor los contenidos interiores, obteniendo así una presentación optimizada según cada ancho de contenedor.

¿Qué ventajas brindan las Container Queries?

Las Container Queries ofrecen ventajas claves en el desarrollo web moderno:

• Adaptabilidad específica según el contenedor, sin depender del tamaño de toda la página.
• Flexibilidad para diseñar un componente único que se adapte perfectamente en diferentes contextos.
• Claridad y eficiencia en la gestión del diseño adaptativo, simplificando el CSS.

Al implementar acertadamente las Container Queries, lograrás un control visual más preciso y una mejor experiencia de usuario en cualquier situación.