Layout Masonry in Webflow Senza Codice

Puoi costruire quel bel layout masonry in stile Pinterest in Webflow — elementi di altezze diverse che si incastrano come per magia — senza scrivere una sola riga di codice. Webflow non offre una funzione masonry integrata, ma l’umile proprietà CSS columns ti porta al risultato con una singola impostazione nello Style panel.

Funziona su qualsiasi cosa, ma dà il meglio con una Collection List: punti le colonne sul contenuto del CMS e ogni elemento si posiziona da solo. In questa lezione ti mostro due esempi reali — una sezione di testimonianze e una galleria di immagini — più il piccolo trucco che evita alle card di spezzarsi tra le colonne e una rapida animazione allo scroll per dare vita al tutto.

Prima di sceglierlo, vale la pena sapere esattamente cosa ottieni: un layout davvero veloce e senza codice, perfetto per i contenuti dinamici, con un paio di compromessi onesti di cui ti parlo alla fine.

Come funziona

Invece di Grid o Flexbox, questa tecnica usa il layout multicolonna dei CSS. Imposti la proprietà columns sul contenitore — la Collection List stessa — e il browser distribuisce gli elementi figli su quel numero di colonne, dall’alto verso il basso. Trattandosi di un’impostazione tipografica, non c’è nulla da collegare: aggiungi o togli elementi dal CMS e si riorganizzano da soli. In Webflow la trovi nello Style panel sotto Typography → Columns; impostala su tre, o sul numero che il tuo design richiede.

La spaziatura ha due parti. Il layout a colonne arriva con un column gap predefinito di 1em, che puoi cambiare a piacere (qualcosa come 1.5rem). Quello che non ti dà è lo spazio tra gli elementi impilati nella stessa colonna, quindi aggiungi un margine inferiore a ogni elemento per farli respirare. La parte facile è la responsività: a ogni breakpoint imposti semplicemente un numero di colonne diverso — diciamo due colonne su tablet e una sola sui breakpoint più piccoli, landscape e portrait.

L’unico difetto da conoscere è che un singolo elemento può spezzarsi tra due colonne, e sembra rotto. La soluzione è una riga: seleziona l’elemento (il figlio diretto dell’elemento su cui hai impostato columns) e aggiungi la proprietà personalizzata break-inside con valore avoid. Così il browser mantiene ogni card intera dentro una colonna.

Due compromessi onesti. Primo, il flusso è verticale — gli elementi riempiono una colonna prima di iniziare la successiva — quindi l’ordine visivo di lettura non è da sinistra a destra. Questo lo rende ideale quando l’ordine preciso degli elementi non è cruciale. Secondo, non è un vero grid masonry: gli elementi vengono disposti in sequenza invece di essere impacchettati in modo ottimale, quindi in alcuni casi può lasciare spazi evidenti e hai un controllo limitato su come gli elementi scorrono tra le colonne. Se ti serve un allineamento perfetto useresti un masonry basato su JavaScript — ma per moltissimi casi questo approccio senza codice va benissimo.

Come si usa

1. Clona il progetto. Prendi il cloneable di Webflow per partire dalla struttura finita, oppure costruiscilo nel tuo progetto.

2. Prepara il contenuto. Usa una Collection List per gli elementi — testimonianze, immagini, qualsiasi cosa tu stia disponendo. Per una galleria di immagini, imposta la larghezza di ogni immagine al 100% così riempie la colonna su qualsiasi schermo (avvolgere ogni immagine in un componente Lightbox è un bel tocco).

3. Attiva le colonne. Seleziona la Collection List, apri lo Style panel e sotto Typography imposta Columns su 3 (o sul numero che preferisci). Quel singolo passaggio ti dà l’effetto masonry.

4. Sistema la spaziatura. Regola il column gap se vuoi (il default è 1em; 1.5rem è un buon punto di partenza), poi aggiungi un margine inferiore — intorno a 1.5rem — all’elemento della lista così gli elementi nella stessa colonna non si toccano.

5. Rendilo responsive. Sui breakpoint tablet e mobile imposta un numero di colonne più basso — ad esempio due su tablet e una sui breakpoint landscape e portrait.

6. Evita che le card si spezzino. Seleziona l’elemento della collection (il figlio diretto) e, sotto Custom Properties nello Style panel, aggiungi break-inside con valore avoid così ogni elemento resta in una sola colonna.

7. Aggiungi un’animazione allo scroll (opzionale). Seleziona l’elemento, vai su Interactions → Scroll Into View, scegli Slide e From Bottom, e imposta un offset tipo 25%. Ora gli elementi entrano dolcemente mentre l’utente scorre, e tutto il layout prende vita.

Se preferisci impostare le proprietà principali via codice, i quattro valori di questa lezione si traducono direttamente in CSS:

/* Sulla Collection List (il contenitore) */
.collection-list {
  columns: 3;
  column-gap: 1.5rem;
}

/* Su ogni elemento della collection (il figlio diretto) */
.collection-item {
  margin-bottom: 1.5rem;
  break-inside: avoid; /* mantiene ogni card intera */
}

/* Immagini della galleria */
.gallery-image {
  width: 100%;
}