Galleria masonry in CSS (stile Pinterest)

Galleria masonry in CSS (stile Pinterest): a cosa serve

Il layout masonry incastra foto di altezze diverse in colonne, senza buchi, come su Pinterest. Incolla gli indirizzi delle foto e scegli le colonne su cellulare, tablet e computer, la spaziatura, gli angoli e la didascalia sopra la foto.

Il codice usa CSS columns, che funziona in tutti i browser, e aggiunge il masonry nativo del CSS (display: grid-lanes, rilasciato in Safari 26.4 a marzo 2026 e ancora senza supporto stabile in Chrome e Firefox) dentro un @supports, come raccomanda il progressive enhancement. La pagina spiega la differenza di ordine tra le due tecniche.

Come si usa

1. Incolla gli indirizzi delle foto.
2. Regola colonne, spazio e angoli.
3. Copia il codice.

Quando usarlo

• Portfolio di fotografo.
• Galleria dei lavori di un salone o di uno studio.
• Bacheca di ispirazioni.

Domande frequenti

Che cos’è il layout masonry?

È la griglia in cui gli elementi hanno la stessa larghezza ma altezze diverse, e ognuno si incastra subito sotto il precedente nella colonna, senza lasciare spazi vuoti. È diventato noto grazie a Pinterest e si adatta a foto verticali e orizzontali mescolate.

Serve JavaScript?

No. Il codice usa CSS columns, che funziona in tutti i browser. Dove esiste già il masonry nativo del CSS (display: grid-lanes, rilasciato in Safari 26.4 a marzo 2026), un @supports attiva la nuova versione, che mantiene l’ordine delle foto da sinistra a destra.

Perché l’ordine delle foto cambia con CSS columns?

Con columns, le foto scendono lungo la prima colonna e solo dopo passano alla seconda, come in un giornale. Se l’ordine conta (ad esempio le più recenti per prime), metti le più importanti all’inizio dell’elenco e usa poche colonne, oppure aspetta che grid-lanes arrivi sugli altri browser.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili