Container queries

Las container queries aplican estilos según el tamaño del contenedor y no el de la pantalla. Un componente se adapta igual en una barra lateral estrecha que en una columna ancha.

container-type: inline-size: convierte un ancestro en contenedor consultable por su ancho.
container-name: asigna un nombre para consultar un contenedor concreto.
@container (min-width: ...): aplica las reglas cuando el contenedor alcanza ese tamaño.
cqw / cqh: unidades relativas al ancho y alto del contenedor, equivalentes a vw y vh.

Ejemplo

Reduce el control de ancho del contenedor. La tarjeta cambia de una columna a dos cuando su contenedor supera los 28rem, sin ninguna media query.

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="content">
    <div class="child">media</div>
    <div class="child">text</div>
  </div>
</div>

<div class="container">
  <div class="content">
    <div class="child">media</div>
    <div class="child">text</div>
  </div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  container-type: inline-size;
  padding: 0.5rem;
}

.content {
  display: grid;
  gap: 1rem;
}

.child {
  padding: 1.5rem;
}

@container (min-width: 28rem) {
  .content {
    grid-template-columns: 1fr 2fr;
  }
}

.container {
  border: 1px solid #2b7de0;
  container-type: inline-size;
  padding: 0.5rem;
}

.content {
  display: grid;
  gap: 1rem;
}

.child {
  padding: 1.5rem;
}

@container (min-width: 28rem) {
  .content {
    grid-template-columns: 1fr 2fr;
  }
}

Edita el código o usa los selectores: el resultado cambia al instante.