¿Qué son las unidades unidades de consulta de contenedor (Container Query Units) y cuándo conviene usarlas?

Las unidades de consulta de contenedor (Container Query Units) son una de las adiciones más potentes y lógicas al CSS moderno, ya que están directamente ligadas a las container queries.

¿Qué son estas unidades?

Son unidades relativas, similares a las unidades de viewport (vw, vh), pero en lugar de ser relativas al tamaño de la ventana del navegador, son relativas al tamaño del contenedor padre que ha sido definido como un «contenedor de consulta» (con la propiedad container-type).

• cqw (Container Query Width): 1cqw es igual al 1% del ancho del contenedor.
• cqh (Container Query Height): 1cqh es igual al 1% de la altura del contenedor.
• cqi (Container Query Inline-size): 1cqi es igual al 1% del tamaño en línea (inline-size) del contenedor. En un modo de escritura horizontal (como el español o el inglés), esto es efectivamente lo mismo que el ancho (cqw).
• cqb (Container Query Block-size): 1cqb es igual al 1% del tamaño de bloque (block-size) del contenedor. En un modo de escritura horizontal, esto es lo mismo que la altura (cqh).

También existen cqmin (el menor valor entre cqi o cqb) y cqmax (el mayor valor).

La recomendación moderna es usar las unidades lógicas (cqi, cqb) en lugar de las físicas (cqw, cqh) porque se adaptan automáticamente a diferentes modos de escritura (por ejemplo, texto vertical), haciendo tu CSS más robusto.

¿Cuándo conviene usarlas?

La verdadera magia de estas unidades es que permiten crear componentes verdaderamente autónomos y reutilizables. Conviene usarlas cuando quieres que las propiedades de un elemento escalen en proporción al tamaño de su contenedor directo, no de toda la página.

Casos de uso principales:

1. Tipografía Fluida dentro de Componentes: Este es el caso de uso más potente. Puedes hacer que el font-size de un título dentro de una tarjeta escale a medida que la tarjeta se hace más ancha o estrecha, sin importar el ancho total de la página.
2. Espaciados Proporcionales: Definir padding, margin o gap con unidades cqi o cqb para que el espaciado interno de un componente siempre mantenga una proporción visualmente agradable con el tamaño del propio componente.
3. Dimensiones Relativas de Elementos Hijos: Dimensionar elementos hijos (como un icono o una miniatura) en relación con el espacio disponible en su componente padre.

Ejemplo Práctico:

Imagina una tarjeta de producto que puede aparecer en una columna principal ancha o en una barra lateral estrecha.

HTML

<div class="columna-principal">
  <div class="tarjeta-producto">
    <h2>Título del Producto</h2>
    <p>El padding de este texto se adapta.</p>
  </div>
</div>

<aside class="barra-lateral">
  <div class="tarjeta-producto">
    <h2>Título del Producto</h2>
    <p>El padding de este texto se adapta.</p>
  </div>
</aside>
Lenguaje del código: PHP (php)

CSS

/* 1. Definimos la tarjeta como un contenedor de consulta */
.tarjeta-producto {
  container-type: inline-size; /* Habilita las consultas basadas en el ancho */
  border: 1px solid #ccc;
  padding: 10px;
}

/* 2. Usamos 'cqi' para estilizar los elementos internos */
.tarjeta-producto h2 {
  /* El tamaño de la fuente será el 8% del ancho de su contenedor (.tarjeta-producto) */
  font-size: clamp(1rem, 8cqi, 2rem); /* Usamos clamp para ponerle límites */
}

.tarjeta-producto p {
  /* El padding horizontal será el 4% del ancho de la tarjeta */
  padding-left: 4cqi;
  padding-right: 4cqi;
}

/* Estilos de layout para el ejemplo */
.columna-principal { width: 70%; }
.barra-lateral { width: 30%; }
body { display: flex; }
Lenguaje del código: PHP (php)

En este ejemplo, el font-size del <h2> y el padding del <p> dentro de la tarjeta serán más grandes cuando la tarjeta esté en la .columna-principal (más ancha) y más pequeños cuando esté en la .barra-lateral (más estrecha), automáticamente, sin necesidad de media queries. Esto hace que el componente .tarjeta-producto sea increíblemente reutilizable.