CSS Container Queries: componentes realmente responsivos

Las container queries cambian por completo la forma de construir interfaces basadas en componentes. En vez de depender solo del viewport, cada bloque puede reaccionar al espacio real que tiene dentro del layout.

Por que importan

Las media queries clasicas solo miran el tamaño de la ventana. Eso falla cuando:

• un mismo componente vive en contextos distintos, como sidebar y contenido principal
• una grilla cambia la cantidad de columnas segun el contexto
• quieres reutilizar componentes sin rehacer reglas para cada pagina

Sintaxis basica

.card-container {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

Casos reales

1. Tarjetas adaptativas

Una card puede pasar de vertical a horizontal segun el espacio disponible en su contenedor, no segun el ancho global de la pantalla.

2. Navegacion flexible

La navegacion puede colapsar a menu hamburguesa dentro de un sidebar estrecho sin depender del viewport completo.

3. Tipografia contextual

El tamaño del texto puede ajustarse al ancho del contenedor para mantener legibilidad en modulos pequeños o grandes.

Unidades de container query

Las nuevas unidades hacen el sistema mas flexible:

• cqw - 1% del ancho del contenedor
• cqh - 1% de la altura del contenedor
• cqi - 1% del tamaño inline del contenedor
• cqb - 1% del tamaño block del contenedor

Soporte en navegadores

Las container queries ya estan soportadas en los navegadores modernos desde 2023. Para escenarios mas conservadores, puedes usar deteccion de soporte:

@supports (container-type: inline-size) {
  /<em> estilos con container queries </em>/
}

Buenas practicas

Nombra tus contenedores para que las reglas sean claras

Empieza con inline-size, que cubre la mayoria de casos

Combinalas con media queries cuando el layout global tambien importe

Prueba los componentes en varios contextos reales, no solo en un sandbox perfecto

Conclusion

Las container queries desbloquean un responsive de verdad a nivel de componente. Cada bloque se vuelve mas reutilizable, mas estable y mas facil de mover entre paginas y layouts.

Puedes probar estas ideas con nuestro CSS Grid Generator y ver como cambia el resultado en distintos tamaños de contenedor.