Un layout che cede per gruppi

Scritto segnaposto. Esiste solo in italiano, per provare il ripiego di lingua dalla versione inglese.

Una pagina si adatta alla larghezza per gruppi e per priorità, non lasciando che il browser spezzi gli elementi uno alla volta.

Chi cede per primo

Lo spazio si toglie a ciò che conta meno: prima la colonna laterale, poi le forme estese dei filtri, infine i testi lunghi, che si troncano. Il titolo e il valore chiave non si piegano mai.

Prima la colonna laterale

La colonna laterale scende sotto il contenuto principale, non si schiaccia accanto a lui.

Poi i filtri

I chip alternativi diventano un menu a tendina; quelli indipendenti vanno a capo insieme.

La soglia è il contenitore

Con le container query la soglia è la larghezza del contenitore, non della finestra:

.post-list { container: post-list / inline-size; }

@container post-list (max-width: 560px) {
  .post-row__meta { display: none; }
  .post-row__fold { display: block; }
}

In un layout con una colonna laterale che compare e scompare, la finestra mente; il contenitore no.

Guardarla stretta

Una pagina non è finita finché non è stata guardata a 390 pixel. Niente scorrimento laterale, nessun chip da solo su una riga, nessun testo spezzato lettera per lettera.