Oggetto Academy

Masonry Layout

Impara a creare layout a colonne dinamiche come Pinterest, dove gli elementi si dispongono automaticamente per ottimizzare lo spazio verticale.

Risultato finale

Ecco come appare il masonry layout con CSS Column Count

Card Piccola

Contenuto breve

ID: 1

Card Media

Contenuto di media lunghezza con più testo

ID: 2

Card Normale

Contenuto standard per questa card

ID: 3

Card Grande

Contenuto molto lungo che occupa più spazio verticale

ID: 4

Card Compatta

Testo compatto

ID: 5

Card Estesa

Contenuto esteso con informazioni aggiuntive

ID: 6

Card Mini

Mini

ID: 7

Card Lunga

Contenuto lungo che si estende per diverse righe

ID: 8

Card Standard

Contenuto standard

ID: 9

Codice CSS Column Count

Implementazione completa del masonry layout

.masonry-container {
  column-count: 3;
  column-gap: 1rem;
  padding: 1rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem;
}

/* Responsive */
@media only screen and (max-width: 768px) {
  .masonry-container {
    column-count: 2;
  }
}

@media only screen and (max-width: 480px) {
  .masonry-container {
    column-count: 1;
  }
}

Vantaggi

Implementazione molto semplice
Supporto browser eccellente
Automaticamente responsive
Nessun JavaScript richiesto

Svantaggi

Ordine di lettura può essere confuso
Difficile controllare l'ordine degli elementi
Problemi con elementi interattivi

🎯 Quando usare Masonry Layout

Perfetto per:

Gallerie di immagini (Pinterest, Instagram)
Blog con articoli di lunghezza variabile
Portfolio creativi
Dashboard con widget di altezze diverse

Evita per:

Contenuto che deve mantenere un ordine specifico
Layout dove l'ordine di lettura è critico
Elementi che richiedono allineamento preciso

💡 Raccomandazione

Per la maggior parte dei casi, inizia con CSS Columns. È la soluzione più semplice e funziona bene per contenuti statici come gallerie di immagini o articoli di blog.

Usa CSS Grid se hai bisogno di più controllo sul layout e non ti dispiace aggiungere un po' di JavaScript per calcolare le altezze degli elementi.