En el mundo del diseño web, la adaptabilidad es clave. Ya tenemos @media para adaptar nuestros estilos a distintos tamaños de pantalla, pero ¿qué pasa si queremos que un componente cambie su estilo según el tamaño de su contenedor y no del viewport? Ahí entra en juego una nueva y poderosa herramienta: @container.

En este artículo te explico qué es, cómo se usa y te muestro ejemplos prácticos para que empieces a usarlo hoy mismo.

¿Qué es @container?⌗

@container es una regla de CSS (también conocida como Container Queries) que permite aplicar estilos a un elemento en función del tamaño de su contenedor, no del tamaño de la ventana del navegador.

Esto permite que los componentes sean realmente adaptables, lo cual es muy útil en diseños modulares y reutilizables. Antes de usarlo, necesitas:

  • Definir qué elemento actuará como contenedor usando la propiedad container-type.
  • Escribir reglas @container dentro del CSS.
.card {
  container-type: inline-size;
}

Esto le indica al navegador: Observa el ancho de este elemento para aplicar las reglas siguientes.

Ejemplo básico: Cambiar layout de una tarjeta⌗

Supongamos que tienes una tarjeta .card con un título y una imagen. Puedes hacer que el diseño cambie si el contenedor es más ancho de 400px:

HTML:⌗ 

<div class="card">
  <img src="foto.jpg" alt="Foto">
  <h2>Título de la tarjeta</h2>
</div>

CSS:⌗ 

.card {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }

  .card img {
    width: 100%;
    max-width: 150px;
  }
}

En este ejemplo, si el contenedor es más ancho de 400px, imagen y texto dentro de la tarjeta se ordenan en columnas.

Consultas más específicas: container-name⌗

Si necesitas aplicar reglas a un contenedor específico, puedes usar container-name y hacer consultas específicas:

CSS:⌗ 

.sidebar {
  container-type: inline-size;
  container-name: sidebar-container;
}

@container sidebar-container (min-width: 300px) {
  .widget {
    display: flex;
  }
}

Demo:⌗