Nei precedenti script abbiamo introdotto il funzionamento, la differenza e il caso d'uso di Container Queries e Media Queries. Ora andiamo a utilizzare un template HTML che, per finalità di demo, resterà elementare, ma ci consentirà di apprezzare ogni singola modifica che verrà applicata.

<div class="content-container">
  <div class="content">
    <p>Contenuto responsive</p>
  </div>
</div>

Impostiamo ora il css in modo che il container venga modificato solo nelle spaziature e il contenuto negli stili.

.content-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* Media query */
@media (max-width: 768px) {
  .content-container {
    padding: 1rem;
  }
}

.content {
  container-type: inline-size;
  container-name: content-box;

  background-color: white;
  border: 2px solid #ccc;
}

/* piccolo */
@container content-box (max-width: 400px) {
  .content {
    background-color: lightblue;
    border-color: blue;
    font-size: 0.8rem;
  }
}

/* medio */
@container content-box (min-width: 401px) and (max-width: 800px) {
  .content {
    background-color: lightgreen;
    border-color: green;
    font-size: 1rem;
  }
}

/* largo */
@container content-box (min-width: 801px) {
  .content {
    background-color: lightcoral;
    border-color: red;
    font-size: 1.2rem;
  }
}

Diversamente dalle Media Queries, le Container Queries non hanno breakpoint standardizzati ma dovrà essere lo sviluppatore a definirli sulla base di ogni singola variazione del layout. Questa diversità è un punto da tenere sotto controllo perchè, per esempio, possiamo immaginare un Grid system da due colonne, che in mobile diventerà una, ma in cui la singola colonna può potenzialmente superare una data dimensione, sia che sia visualizzata su una viewport grande che su una piccola. In questa casistica il layout cambierà 4 volte nel passaggio da una finestra larga a una piccola.