Data di pubblicazione: 14 gennaio 2026
A partire da Chrome 145, sono supportate le proprietà column-wrap e column-height della
specifica di livello 2 del layout a più colonne.
Queste proprietà consentono di disporre le colonne su una nuova riga
nella direzione del blocco.
Prima di Chrome 145, se l'altezza del contenitore multicolonna era limitata, i contenuti che non rientravano nello spazio disponibile venivano visualizzati come colonne di overflow nella direzione in linea. In questo modo verrà creata una barra di scorrimento orizzontale sul web.
Con le proprietà column-height e column-wrap puoi impostare un'altezza per la riga di colonne e impostare le colonne di overflow in modo che vengano visualizzate come una nuova riga.
La possibilità di creare nuove righe di colonne offre una soluzione alternativa alla situazione attuale, in cui la scelta è tra costringere le persone a scorrere verso l'alto e verso il basso per leggere le colonne o rischiare una barra di scorrimento orizzontale in situazioni in cui la quantità di contenuti è imprevedibile.
Consente inoltre pattern come un carosello di indicazioni stradali, in cui vengono create colonne che riempiono l'altezza della finestra visibile disponibile. Per leggere la riga successiva di colonne, scorri alla schermata successiva nella direzione del blocco.
Creare un'esperienza di lettura chiara
Con più righe di colonne, è possibile creare un'esperienza di lettura poco chiara, in cui non è ovvio per il lettore che ci sono più righe e salta lo spazio per continuare a leggere in basso nella colonna. Questo è un aspetto da considerare nella progettazione della UI. La futura possibilità di aggiungere decorazioni nello spazio tra le righe ti fornirà uno strumento aggiuntivo per creare questa distinzione visiva.
Le regole per le righe saranno disponibili a breve
La specifica multicolore di livello 1 include proprietà per lo stile di una column-rule; questa regola viene inserita nello spazio tra le colonne. Le proprietà per lo stile delle regole delle righe sono incluse nella nuova specifica CSS Gap Decorations, attualmente in prova per gli sviluppatori. Una volta stabilizzata, potrai aggiungere regole per righe e colonne in griglia, flexbox e multicolonna.