Le Container Queries rappresentano una delle più importanti innovazioni nel mondo del CSS, offrendo una soluzione efficace per creare layout responsivi che si adattano alle dimensioni di un contenitore piuttosto che a quelle dell'intera viewport, come invece accade con le media query.

Questa caratteristica è particolarmente utile quando si sviluppano componenti indipendenti e riutilizzabili, perché gli stili si adatteranno dinamicamente allo spazio che occupano all'interno di un contenitore.

Per iniziare dobbiamo dichiarare un contenitore utilizzando la proprietà container.

.card {
  container: inline-size;
  width: 100%;
}

Identificato l'elemento, aggiungiamo la regola che si applicherà solamente superata una specifica dimensione

@container (min-width: 600px) {
  .card {
    font-size: 1.5rem;
    background-color: lightblue;
  }
}

Quando la larghezza del contenitore raggiunge o supera 600px, il componente .card avrà uno stile diverso.