Mattone dopo mattone: aiutaci a creare CSS Masonry

Patrick Brosset

Alison Maher

Pubblicazione: 23 luglio 2025, ultimo aggiornamento: 13 febbraio 2026

Avviso: sintassi obsoleta. Gli esempi di codice in questo post si basano su una bozza iniziale di quello che ora è noto come "layout delle corsie della griglia". Per la versione più recente della sintassi, consulta la specifica css-grid-3.

I team di Microsoft Edge e Google Chrome sono lieti di annunciare che il layout a griglia CSS è pronto per i test iniziali degli sviluppatori a partire da Chrome ed Edge 140.

Poiché i problemi relativi alla specifica e alla sintassi CSS masonry sono ancora aperti, il tuo feedback è fondamentale per aiutarci a definire la forma finale dell'API. Prova la funzionalità e facci sapere cosa ne pensi.

Testa CSS Masonry in Chromium oggi stesso

Per testare CSS Masonry oggi:

1. Utilizza Chrome o Edge 140 o versioni successive (o un altro browser basato su Chromium con una versione corrispondente).
2. Vai a about:flags in una nuova scheda.
3. Cerca "CSS Masonry Layout".
4. Attiva il flag.
5. Riavvia il browser.

Con la funzionalità attivata, puoi vederla in azione consultando le demo di Microsoft Edge (visualizza il codice sorgente delle demo) o continuando a leggere per scoprire di più sulla funzionalità e sulla sintassi disponibile.

Che cos'è la muratura?

CSS masonry è una modalità di layout che ti consente di creare una disposizione di elementi simile a un mattone, in un modo non facilmente ottenibile con CSS grid, flexbox o layout multicolonna.

CSS Masonry può essere utilizzato per disporre gli elementi in un formato a colonne o righe con elementi posizionati all'interno di queste colonne o righe in modo compresso.

Pensa al layout a griglia come a un'autostrada, dove l'unico vincolo è il numero e la dimensione delle diverse corsie di guida. All'interno delle corsie, i veicoli possono avere qualsiasi lunghezza e cercano sempre di essere il più vicini possibile alla loro destinazione, ovvero l'inizio del layout a griglia.

Gli elementi del layout sono vincolati solo in una direzione e possono respirare liberamente lungo l'altra, indipendentemente dagli altri elementi vicini. Masonry è diverso dalla griglia in quanto le sue tracce sono definite solo in una singola direzione.

In un layout a griglia, l'ordine visivo degli elementi è meno importante del design finale. Masonry ti consente di sfruttare al meglio lo spazio disponibile, indipendentemente dagli elementi che hai. Questo lo rende un'ottima scelta per le pagine con un'alta densità di elementi visivi e in cui l'ordine visivo dei contenuti non è importante quanto il risultato finale.

Un aspetto interessante del layout a griglia asimmetrica è che consente anche agli elementi di estendersi su più tracce, proprio come con la griglia. In questo caso, gli elementi continuano a essere posizionati in modo da riempire il più possibile lo spazio disponibile.

Questo comportamento di posizionamento automatico può portare a risultati molto interessanti, che i web designer hanno cercato di ottenere per molto tempo. Per un esempio, dai un'occhiata alla demo della galleria fotografica di New York, che mostra come le foto possono essere visualizzate in modo compatto su più colonne, consentendo al contempo ad alcuni elementi (il titolo in questo esempio) di estendersi su più colonne:

Ecco alcuni altri esempi di utilizzo del layout a griglia.

Un layout di blog che mostra la miniatura e la descrizione di ogni post.

Visualizza la demo del blog qui.

Un sito di notizie, in cui gli articoli vengono visualizzati in colonne, con alcuni articoli più larghi di altri e immagini hero che occupano l'intera larghezza della pagina.

Visualizza la demo del sito di notizie qui.

Una raccolta di foto, con colonne di dimensioni diverse e alcune foto che si estendono su più colonne.

Guarda la demo sulla natura qui.

Soluzioni alternative e relative limitazioni

Oggi, per implementare questo pattern di progettazione sul web, devi utilizzare librerie JavaScript o soluzioni alternative che utilizzano griglia CSS, flexbox o più colonne. Tuttavia, questa operazione può comportare degli svantaggi, tra cui:

• Rendimento peggiore: l'utilizzo di librerie JavaScript o codice personalizzato per simulare il layout a griglia CSS comporta dei compromessi in termini di rendimento, che possono portare a esperienze utente negative.
• Maggiore complessità del codice:
  • Garantire il corretto posizionamento degli elementi e la distribuzione dello spazio all'interno della griglia CSS, di flexbox o di più colonne per simulare un layout CSS a griglia asimmetrica è difficile da ottenere.
  • Anche la gestione di funzionalità specifiche, come gli elementi che si estendono su più colonne o righe, l'ordinamento personalizzato degli elementi o l'adattamento alla visualizzazione, può comportare complessità e limitazioni.
• Maggiore onere di manutenzione: il codice CSS o JavaScript personalizzato complesso è più difficile da gestire.

La griglia CSS è una modalità di layout straordinaria, molto flessibile e che ti consente di creare molti stili di layout diversi, sia per un'intera pagina web, sia per un componente o semplicemente per allineare singoli elementi. Tuttavia, non ha le stesse caratteristiche della muratura.

Nella griglia CSS, le righe e le colonne sono definite in modo rigido e gli elementi possono esistere solo all'interno delle celle della griglia. Se stai cercando di raggruppare gli elementi lungo uno degli assi, ma le dimensioni degli elementi non sono adatte alle rispettive celle, dovrai scegliere se lasciare spazi vuoti tra gli elementi o allungarli per riempire lo spazio vuoto.

Proprio come la griglia a blocchi, flexbox si occupa solo di una direzione e consente agli elementi di decidere lo spazio che vogliono occupare nell'altra direzione. Ciò significa che puoi ottenere un layout simile a un layout a griglia asimmetrica utilizzando flexbox, a condizione che tu sia d'accordo con la disposizione degli elementi nella direzione del blocco, una colonna alla volta. Il container flessibile avrà anche bisogno di una dimensione o un'altezza del blocco definita, per fare in modo che gli elementi vengano aggregati in una nuova riga flessibile, creando così una nuova colonna.

Il layout a più colonne può anche creare un layout simile a quello a griglia, disponendo nuovamente gli elementi in colonne. Inoltre, il layout a più colonne non consente di dimensionare ogni colonna in modo diverso. Hanno tutte le stesse dimensioni, mentre la griglia asimmetrica offre molta flessibilità quando si tratta di definire i canali in cui vengono inseriti gli elementi.

Il punto da ricordare qui non è che i layout griglia, flexbox o multicolonna sono peggiori di quello a griglia asimmetrica. Sono ottimi tipi di layout che hanno molti casi d'uso. Il punto è: se vuoi un layout a griglia, il CSS a griglia è quello che te lo darà.

Lo stato del layout a griglia CSS

Il CSS Working Group sta elaborando la specifica masonry in CSS Grid Level 3. La specifica è ancora in fase di sviluppo e include temporaneamente due diverse sintassi proposte. Il primo utilizza una nuova parola chiave per la proprietà display, mentre nel secondo la griglia a mosaico è integrata direttamente nel layout di griglia CSS.

Utilizza display: masonry

Questa sintassi introduce il layout a griglia CSS come tipo di display. Ulteriori dettagli sull'approccio e sulla sua motivazione sono disponibili nel blog post Feedback needed: How should we define CSS masonry? del team di Google Chrome, nonché nella sezione restante di questo post. Il prototipo attuale in Chromium si basa su questa proposta.

display: grid; grid-template-*: masonry;

In questa sintassi, la griglia CSS è integrata direttamente nella griglia CSS. La modalità masonry viene attivata applicando la parola chiave masonry alla definizione grid-template-columns nel caso di un layout masonry basato su righe o alla definizione grid-template-rows nel caso di un layout masonry basato su colonne.

Per maggiori dettagli su questa proposta e sulla sua motivazione, consulta il post di WebKit Aiutaci a scegliere la sintassi finale per Masonry in CSS.

Tieni presente che un'alternativa a questa proposta è la proprietà item-pack e la parola chiave collapse, che attiverebbe la griglia CSS anziché utilizzare una delle due proprietà del modello di griglia.

Dalla pubblicazione dei post dei team di Chrome e WebKit, il CSSWG ha continuato le discussioni sulla sintassi generale da adottare. Il tuo feedback può contribuire a un ulteriore sviluppo di questi forum.

Per maggiori dettagli sullo stato attuale delle discussioni, consulta il problema 11593, che illustra l'attuale insieme di argomenti di discussione sulla sintassi di masonry, e il problema 11243 per un riepilogo del dibattito sulla sintassi finora.

Crea il tuo layout a griglia CSS

Divertiamoci un po' e creiamo un layout CSS a griglia.

Sebbene la sintassi per CSS Masonry sia ancora in fase di discussione, la nostra implementazione della funzionalità può essere testata in Chromium oggi attivando il flag CSS Masonry Layout, come spiegato in Testa CSS Masonry oggi. Gli esempi seguenti mostrano cosa è disponibile nella prova per sviluppatori.

Crea un contenitore a griglia asimmetrica

Per creare il tuo primo contenitore masonry basato su colonne, utilizza display:masonry e definisci le dimensioni delle colonne utilizzando grid-template-columns. Poiché masonry-direction viene impostato su column per impostazione predefinita, l'impostazione di questa proprietà è facoltativa.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

Visualizza qui la demo delle colonne della stessa dimensione

Per un contenitore masonry basato su righe, utilizza invece display:masonry, definisci le dimensioni delle righe utilizzando grid-template-rows e poi imposta masonry-direction:row.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

Visualizza qui la demo delle righe della stessa dimensione

Come avrai notato, questa sintassi si discosta leggermente dalla proposta originale di Google. Indipendentemente dall'attivatore utilizzato per CSS Masonry, il CSS Working Group ha deciso di riutilizzare le proprietà di dimensionamento e posizionamento del modello di griglia all'interno del layout CSS Masonry.

Sebbene ciò consenta un maggiore riutilizzo delle proprietà tra i tipi di layout, potresti trovare questa soluzione poco chiara e ci piacerebbe ricevere la tua opinione in merito. Potremmo valutare la possibilità di creare alias più generici per proprietà come grid-template-columns e grid-template-rows, ad esempio template-columns o template-rows, che potrebbero essere utilizzati sia per la griglia che per la disposizione a mosaico.

Utilizza le dimensioni predefinite della traccia

Un nuovo tipo di display offre l'opportunità di ripensare le impostazioni predefinite della proprietà.

Nella griglia, grid-template-columns e grid-template-rows sono impostati per impostazione predefinita su none, che, come attualmente definito, di solito genera una singola colonna o riga. Per masonry, questa impostazione predefinita comporterebbe, nella maggior parte dei casi, un layout indesiderato.

L'implementazione in Chromium aggiunge la definizione di none appena proposta, che sostituirà la dimensione predefinita della traccia in CSS masonry. Questa nuova dimensione predefinita della traccia è il valore repeat(auto-fill, auto). Questo valore crea un layout a griglia asimmetrica senza dover definire le dimensioni delle tracce:

.masonry {
  display: masonry;
  gap: 10px;
}

Visualizza la demo delle dimensioni predefinite della traccia qui

Come mostrato nell'immagine, il contenitore masonry crea il maggior numero possibile di colonne con dimensioni automatiche che rientrano nello spazio disponibile.

Con la griglia CSS, tutti gli elementi vengono posizionati prima che le tracce vengano ridimensionate, il che significa che questa definizione di ridimensionamento automatico delle tracce non è possibile. Tuttavia, con la griglia CSS, questa limitazione non si applica più, poiché il posizionamento e il dimensionamento sono intrecciati e semplificati. Senza questa limitazione, possiamo fornire una dimensione predefinita della traccia più utile per i layout a griglia.

Prova la proprietà abbreviata masonry

Come accennato in precedenza, l'implementazione attuale in Chromium si basa sulle proprietà grid-template-* per definire la traccia masonry nel layout. Tuttavia, poiché il layout a griglia asimmetrica ha una sola dimensione, abbiamo implementato anche la proprietà abbreviata masonry, che puoi utilizzare per definire contemporaneamente la direzione del layout a griglia asimmetrica e la definizione della traccia, senza la proprietà con prefisso grid- che genera confusione.

Ad esempio, i seguenti due snippet di codice creeranno contenitori CSS masonry equivalenti.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

Visualizza la demo della sintassi abbreviata di masonry qui

La sintassi abbreviata masonry è ancora in fase di discussione da parte del CSS Working Group. Provala oggi stesso e facci sapere cosa ne pensi.

Utilizza dimensioni delle tracce personalizzate

Quando si tratta di definire le dimensioni delle tracce, la griglia a mosaico è flessibile quanto la griglia, in quanto ti consente di perfezionare il numero e le dimensioni delle tracce del layout. Inoltre, le tracce di un layout a griglia asimmetrica non devono avere tutte le stesse dimensioni, ad esempio:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

Visualizza la demo delle dimensioni dei canali personalizzati qui

In questo esempio, definiamo due prime tracce da 3rem, seguite da un numero variabile di tracce da 5rem, seguite da una singola traccia da 12rem.

Coprire più canali

In masonry, gli elementi non devono essere vincolati alle tracce in cui sono posizionati, in quanto possono estendersi su più tracce, se necessario. Questo può essere molto utile quando alcuni elementi sono più importanti di altri e richiedono più spazio.

Ad esempio:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

Guarda qui la demo per l'estensione su più canali

Puoi anche utilizzare questa funzionalità per estendere più tracce e fare in modo che determinati elementi occupino l'intera lunghezza del container:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

Questo è ciò che utilizza la demo del sito di notizie per mostrare l'annuncio di abbonamento all'interno degli articoli.

Ottimizzazione del posizionamento degli elementi in muratura

In CSS Masonry, gli elementi vengono posizionati nella colonna o nella riga con la posizione di esecuzione più breve.

Immagina un contenitore con layout a griglia asimmetrica a due colonne. Se il container ha un elemento alto 110 px nella prima colonna e un elemento alto 100 px nella seconda colonna, un terzo elemento verrà posizionato nella seconda colonna, dove sarà più vicino di 10 px all'inizio della direzione della griglia asimmetrica.

Se ritieni che una differenza di 10 px nella posizione di esecuzione sia sufficientemente piccola per il tuo caso e preferisci che il terzo elemento venga posizionato nella prima colonna per corrispondere meglio all'ordine di origine, utilizza la proprietà item-tolerance.

La nuova proprietà item-tolerance controlla la sensibilità nel posizionamento degli elementi.

Nell'esempio precedente, puoi applicare item-tolerance: 10px; al tuo contenitore per personalizzare la variabilità nel posizionamento degli elementi:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

Visualizza la demo sulla tolleranza degli articoli qui

Tieni presente che la bozza della specifica chiama questa proprietà item-slack. Il CSS Working Group ha recentemente deciso di utilizzare item-tolerance come nome e la specifica verrà aggiornata a breve.

Altre proprietà disponibili

Puoi utilizzare le stesse proprietà di dimensionamento e posizionamento del template per dimensionare e posizionare gli elementi nell'asse della griglia di un contenitore masonry, come faresti con CSS Grid, ad esempio grid-row, grid-column, grid-area, grid-template-areas o order. Sfrutta tutta la potenza della griglia CSS durante la creazione del layout a griglia.

Richiesta di feedback

Non vediamo l'ora che tu esplori il layout CSS masonry, dia sfogo alla tua creatività e scopra le nuove funzionalità che può aiutarti a sbloccare. Un ottimo modo per iniziare è consultare le nostre demo e il relativo codice sorgente e iniziare a creare i tuoi esempi in Chromium (ricorda di attivare prima il flag).

Il tuo feedback è importante per aiutarci a perfezionare l'API e verificare che sia progettata per soddisfare le tue esigenze sul web. Prova il layout a griglia e facci sapere cosa ne pensi.

Se avete idee o feedback sulla forma dell'API, fatecelo sapere commentando il problema 11243 o, se preferite scrivere un post sul vostro blog o sui social media, assicuratevi di farcelo sapere su X o LinkedIn.

La griglia CSS è ancora in fase di implementazione in Chromium. Se la provi, tieni presente che ci stiamo ancora lavorando attivamente e che potresti riscontrare casi in cui non si comporta come previsto. Alcune delle limitazioni attuali includono, tra le altre, il posizionamento denso, il posizionamento inverso, il supporto della griglia secondaria, il supporto fuori flusso, il supporto della base di riferimento, il supporto di DevTools, il supporto della frammentazione e il supporto della decorazione degli spazi vuoti.

Se trovi un bug durante il test della funzionalità, condividi il tuo feedback aprendo un nuovo bug di Chromium.