15 · Container queries

Container queries

Elementos que responden al tamaño de su contenedor, no del viewport

Chrome 105+ · Firefox 110+ · Safari 16+

← Índice

container-type: inline-size

Un elemento se vuelve un "container" y sus hijos pueden responder a su ancho, no al del viewport.

📺

Tarjeta responsiva

Cambiá el ancho arrastrando el borde derecho. El layout se reorganiza solo.

container-type: inline-size

@container (min-width: 320px)

Cuando el container mide más de 320px, la card pasa de vertical a horizontal. Sin media queries del viewport.

@container (min-width: 320px) { flex-direction: row }

Sin JS

Antes necesitabas ResizeObserver + clases condicionales. Ahora CSS reacciona al tamaño del padre, no del navegador.

css

/* el elemento se vuelve un container */
.cq-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}

/* cuando el container mide más de 320px */
@container (min-width: 320px) {
  .cq-card {
    flex-direction: row;
  }
  .cq-card-media {
    width: 80px;
    height: auto;
  }
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.