Layout Masonry Orizzontale in Webflow

Costruisci un layout masonry orizzontale in Webflow dove le foto riempiono le righe mantenendo il proprio aspect ratio — totalmente responsive, davvero accessibile, e senza una sola riga di codice custom. È la controparte orizzontale della griglia masonry verticale: le immagini stanno fianco a fianco, si allargano per riempire ogni riga in modo ordinato e si riorganizzano con eleganza su qualsiasi schermo.

Tutto gira su Flexbox, quindi è anche uno dei modi migliori per sentire davvero come si comportano flex-grow e flex-shrink. Ispirato a un classico articolo di CSS-Tricks, il layout si appoggia a una manciata di proprietà che collaborano in silenzio per dimensionare ogni item al posto tuo.

Partiamo da immagini statiche, poi applichiamo lo stesso identico setup a una collezione CMS, e chiudiamo aggiungendo un’animazione staggered con GSAP così le immagini scivolano e appaiono in dissolvenza mentre entrano nello scroll. L’accessibilità qui non è un ripensamento — è dentro la struttura fin dal primo elemento.

Come funziona

La base è una lista non ordinata, e la scelta è voluta. Quando il contenuto vive in una lista, stai dicendo esplicitamente alle tecnologie assistive che questi item appartengono a un unico insieme strutturato: uno screen reader annuncia “lista, 12 elementi” e legge ogni immagine come parte di una sequenza. Questo, insieme a un alt text chiaro su ogni immagine, è ciò che rende la galleria accessibile invece che un semplice muro di foto. Alla lista diamo display: flex, il wrap attivo così i figli scorrono su più righe, un piccolo gap, e togliamo i bullet di default e il padding sinistro e inferiore.

La magia del masonry è un’unica idea: lascia che gli item decidano la propria larghezza, poi riempi la riga. Ogni item riceve un’altezza più o meno fissa (36vh su desktop è un valore di partenza del tutto arbitrario — scegli quello che mostra bene le tue foto) mentre la larghezza è lasciata all’aspect ratio dell’immagine. Da solo questo lascia una singola riga irregolare, quindi imposti flex-grow e flex-shrink dell’item entrambi a 1. Ora gli item collaborano: si allargano per riempire ogni riga da bordo a bordo e si restringono per evitare l’overflow orizzontale quando in una riga lo spazio finisce. Dato che ora l’item si allarga, l’immagine dentro — dimensionata a 100% di larghezza e altezza — verrebbe distorta, quindi entra in gioco object-fit: cover a preservare l’aspect ratio reale di ogni foto.

C’è un intoppo estetico: l’ultimo item spesso cresce fino a prendersi tutto lo spazio rimasto sull’ultima riga, e sta male. La soluzione è un item lista extra che fa da spaziatore — una combo class con flex-shrink: 0 e flex-grow: 10 (10 è solo il valore che rendeva meglio, senza alcuna scienza dietro). Ma un item lista vuoto è un campanello d’allarme per l’accessibilità: dice a uno screen reader “ecco un item” quando dentro non c’è nulla. Il rimedio è una riga sola — aggiungi aria-hidden="true" a quell’item vuoto così gli screen reader lo saltano come decorativo.

Ecco le regole principali a cui corrispondono le impostazioni di Webflow:

.gallery-list {
  display: flex;
  flex-wrap: wrap;      /* "Wrap" sotto Layout */
  gap: 1.5rem;
  list-style: none;     /* Nessun bullet */
  padding-left: 0;
  padding-bottom: 0;
}

.gallery-item {
  height: 36vh;         /* arbitrario — rifinisci per breakpoint */
  flex: 1 1 0;          /* grow: 1, shrink: 1 */
}

.gallery-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* mantieni l'aspect ratio reale */
}

/* spaziatore che sistema l'ultima riga */
.gallery-item.cc-last {
  flex-grow: 10;
  flex-shrink: 0;
}

La responsività è solo un affinamento di quei numeri per breakpoint: un’altezza minore su tablet, e in landscape spesso è più pulito cambiare del tutto prospettiva — imposta la larghezza dell’item a qualcosa come 28vw e l’altezza ad auto, dato che il viewport è largo e basso. Su mobile portrait le immagini si impilano, quindi puoi tornare a un valore basato sull’altezza e semplicemente mettere il display dell’item spaziatore su none.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow — arriva con struttura e stili completi, così puoi sezionare ogni impostazione descritta sopra.

2. Costruisci la lista. Dentro il tuo section content wrapper, aggiungi una lista non ordinata con la classe gallery-list, impostala su display: flex, attiva Wrap sotto Layout, aggiungi un piccolo gap, togli i bullet nelle impostazioni della lista e azzera padding sinistro e inferiore.

3. Prepara un item, poi duplica. Dai al singolo list item la classe gallery-item e un’altezza arbitraria (parti da ~36vh). Inserisci dentro un’immagine con la classe gallery-item-image al 100% di larghezza e altezza. Sotto Flex child, imposta grow e shrink entrambi a 1. Poi duplica l’item per riempire la galleria (12 funziona bene) e sostituisci ogni foto.

4. Sistema l’aspect ratio. Seleziona l’immagine e imposta object-fit su cover così le foto mantengono le proporzioni mentre gli item si allargano. Regola la posizione del focus solo se una foto specifica lo richiede.

5. Rifinisci l’ultima riga (se serve). Se l’ultimo item si allarga male, aggiungi un altro list item con la classe gallery-item più una combo class (es. cc-last), e sotto Flex child imposta shrink a 0 e grow a 10. Poi aggiungi l’attributo aria-hidden="true" a quell’item vuoto così gli screen reader lo ignorano.

6. Rendilo responsive. Riaggiusta l’altezza dell’item su tablet, passa a un valore basato sulla larghezza (es. 28vw) con height: auto in landscape, e su mobile portrait torna a un valore in altezza mettendo il display dell’item spaziatore su none.

7. Portalo nel CMS (opzionale). Assegna gallery-list, gallery-item e gallery-item-image a collection list, item e immagine. Lo spaziatore “vuoto” è semplicemente un elemento della collezione senza immagine; targettizzalo con lo stato last item integrato nel menu a tendina del selettore, così lo stili senza combo class. Aggiungi un campo di testo per aria-hidden (true sull’item vuoto, false sugli altri) e collegalo all’attributo aria-hidden dell’item. Ricorda che un vero progetto cliente vuole anche un campo di testo per l’alt text di ogni immagine.

8. Aggiungi il movimento (opzionale). Per far scivolare e apparire la galleria in dissolvenza allo scroll, riusa la soluzione GSAP staggered di Francesco: incolla il suo script e aggiungi il suo attributo staggered-list all’elemento gallery-list, lasciando i default così come sono. Pubblica e controlla la pagina live — lo stagger gira solo a runtime, non nel Designer.