Layout masonry: approcci CSS e JS

Il masonry layout dispone gli elementi in colonne, facendo occupare a ciascuno il successivo spazio verticale disponibile, come su Pinterest. Gli elementi hanno la stessa larghezza di colonna, ma altezze variabili. Il risultato è una griglia densa e visivamente dinamica, senza spazi bianchi inutilizzati tra le righe.

Chrome e Firefox, se eseguiti dietro un flag, supportano grid-template-rows: masonry. Gli elementi vengono disposti in colonne, ma le righe ricevono un'altezza basata sul contenuto, consentendo agli elementi di altezza variabile di disporsi senza spazi vuoti. Questa è la futura soluzione nativa.

Le colonne CSS creano un layout simile al masonry: columns: 3; column-gap: 1rem. Gli elementi scorrono automaticamente dall'alto verso il basso all'interno di ogni colonna. Il limite è che gli elementi vengono ordinati colonna per colonna (in cima alla colonna 1, in cima alla colonna 2...) e non riga per riga, con conseguenze sull'ordine di lettura e sull'accessibilità.

Impedisca agli elementi di interrompersi tra due colonne applicando break-inside: avoid a ogni elemento. Senza questa regola, una card alta può essere divisa tra due colonne, tagliando a metà il contenuto. La aggiunga sempre quando utilizza le colonne CSS per contenuti simili a card.

Masonry.js, di David DeSandro, riposiziona gli elementi con posizionamento assoluto calcolando l'altezza delle colonne e inserendo ogni elemento nella colonna più corta. Isotope estende questa funzionalità con ordinamento e filtri. Entrambe richiedono JavaScript per calcolare e applicare le posizioni.

Un approccio leggero consiste nel definire una griglia con colonne fisse e righe da 1px, quindi utilizzare JS per impostare grid-row-end: span N su ogni elemento in base all'altezza del contenuto e all'altezza della riga. Gli elementi mantengono l'allineamento sulle righe della griglia ottenendo al contempo altezze variabili.

Le posizioni del masonry diventano obsolete quando cambia la dimensione della finestra o quando vengono caricate le immagini. Utilizzi ResizeObserver per rilevare i cambiamenti di dimensione e avviare un ricalcolo. Applichi il debounce ai ricalcoli per evitare calcoli eccessivi durante eventi di ridimensionamento rapidi.

Le immagini con altezza sconosciuta fanno sì che il masonry venga ricalcolato dopo il caricamento. Fornisca attributi espliciti di larghezza e altezza per tutte le immagini, in modo che il browser riservi lo spazio prima del caricamento. Questo previene gli spostamenti delle posizioni e riduce il numero di passaggi di ricalcolo.

L'aggiunta di elementi a un layout masonry richiede di ricalcolare solo le colonne interessate, cioè quelle dei nuovi elementi, non l'intera griglia. Librerie come Masonry.js supportano l'animazione degli elementi aggiunti e un layout incrementale senza ricalcolare completamente la disposizione a ogni nuovo gruppo.

L'ordine visivo del masonry differisce dall'ordine del DOM nei layout con posizionamento tramite JavaScript. Si assicuri che l'ordine di tabulazione segua l'ordine del DOM, cioè la sequenza logica di lettura, e non la posizione visiva. Aggiunga tabindex con attenzione oppure si affidi al normale flusso del DOM per la navigazione da tastiera.

Le colonne CSS sono semplici e non richiedono JS, ma presentano una sequenza di lettura per colonne, non per righe, e non supportano filtri o ordinamento. Il masonry Grid non è ancora supportato in produzione. Il masonry JavaScript è completo, ma aggiunge peso e un ritardo di rendering mentre le posizioni vengono calcolate dopo il caricamento del contenuto.

Quale proprietà CSS impedisce a una card di essere divisa tra due colonne CSS?

Il masonry layout può essere realizzato con le colonne CSS, semplici ma ordinate per colonna, con l'implementazione sperimentale grid-template-rows: masonry, orientata al futuro, oppure con librerie JavaScript come Masonry.js, complete di ordinamento e filtri. Ogni approccio comporta compromessi tra semplicità, accessibilità e funzionalità.