Mattone dopo mattone: aiutaci a creare CSS Masonry

Patrick Brosset

Alison Maher

Data di pubblicazione: 23 luglio 2025

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

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

Prova CSS Masonry in Chromium oggi stesso

Per provare 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) oppure continua a leggere per scoprire di più sulla funzionalità e sulla sintassi disponibile.

Che cos'è il layout a griglia?

Il layout a griglia CSS è una modalità di layout che consente di creare una disposizione degli elementi simile a quella dei mattoni, in un modo non facilmente ottenibile con la griglia CSS, flexbox o il layout a più colonne.

Il layout a griglia CSS può essere utilizzato per disporre gli elementi in formato a colonna o a riga con gli elementi inseriti in modo compresso all'interno di queste colonne o righe.

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

Gli elementi del layout sono vincolati solo in una direzione e possono muoversi liberamente nell'altra, indipendentemente dagli altri elementi vicini. Il layout a griglia è diverso dalla griglia in quanto le tracce sono definite solo in una direzione.

Nel layout a griglia, l'ordine visivo degli elementi è meno importante del design finale. La griglia ti consente di sfruttare al meglio lo spazio disponibile, indipendentemente dagli elementi che hai. Per questo motivo, è un'ottima scelta per le pagine con molti elementi visivi, in cui l'ordine visivo dei contenuti non è importante quanto il risultato finale.

Un aspetto interessante del layout a griglia è 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 cercano di ottenere da molto tempo. Per un esempio, consulta la demo della galleria fotografica di New York City, che mostra come le foto possono essere visualizzate in modo compatto su più colonne, consentendo a determinati elementi (il titolo in questo esempio) di estendersi su più colonne:

Ecco alcuni altri esempi di utilizzo del layout a griglia.

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

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

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

Soluzioni alternative e relative limitazioni

L'implementazione di questo pattern di progettazione sul web oggi richiede l'utilizzo di librerie JavaScript o soluzioni alternative che utilizzano griglie CSS, flexbox o layout a più colonne. Tuttavia, questa operazione può comportare degli svantaggi, tra cui:

• Rendimento inferiore: l'utilizzo di librerie JavaScript o codice personalizzato per imitare la muratura CSS comporta 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 di griglia CSS, flexbox o multicolonna per imitare un layout a griglia CSS è difficile da ottenere.
  • La gestione di funzionalità specifiche, come elementi che si estendono su più colonne o righe, l'ordinamento personalizzato degli elementi o l'adattamento alla finestra, può anche portare a complessità e limitazioni.
• Maggiore carico di manutenzione: il codice CSS o JavaScript personalizzato complesso è più difficile da mantenere.

La griglia CSS è una modalità di layout straordinaria, molto flessibile e che ti consente di creare molti stili diversi di layout, sia per un'intera pagina web, sia per un componente, sia solo 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 disporre gli elementi lungo uno degli assi, ma le dimensioni degli elementi non corrispondono a quelle delle rispettive celle, dovrai scegliere se lasciare spazi tra gli elementi o allungarli per riempire lo spazio vuoto.

Come la muratura, Flexbox si preoccupa solo di una direzione e lascia che gli elementi decidano lo spazio che vogliono occupare nell'altra direzione. Ciò significa che puoi ottenere un layout simile a un layout a griglia utilizzando Flexbox, a condizione che gli elementi vengano disposti nella direzione del blocco, una colonna alla volta. Il contenitore flessibile dovrà anche avere una dimensione del blocco o un'altezza definite, in modo che gli elementi vengano inseriti in una nuova riga flessibile, creando così una nuova colonna.

La funzionalità Multicolonna può anche creare un layout simile a una muratura, disponendo gli elementi in colonne. Inoltre, il layout a più colonne non consente di dimensionare ciascuna delle colonne in modo diverso. Hanno tutti le stesse dimensioni, mentre la muratura offre molta flessibilità nella definizione delle tracce in cui vengono inseriti gli elementi.

Il punto da ricordare qui non è che la griglia, Flexbox o il layout a più colonne siano peggiori del layout a griglia. Sono ottimi tipi di layout con molti casi d'uso. Il punto è che se vuoi un layout a griglia, il CSS masonry è quello che ti darà.

Lo stato di CSS Masonry

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

Utilizza display: masonry

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

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

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

Per saperne di più 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 CSS masonry 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 utilizzare. Il tuo feedback può contribuire a migliorare lo sviluppo di questi forum.

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

Creare il tuo layout a griglia CSS

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

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

Creare un contenitore a griglia

Per creare il tuo primo contenitore a griglia basato su colonne, utilizza display:masonry e definisci le dimensioni delle colonne utilizzando grid-template-columns. Poiché masonry-direction è 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;
}

Per un contenitore a griglia basato sulle righe, utilizza 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;
}

Come avrai notato, questa sintassi si discosta leggermente dalla proposta originale di Google. Indipendentemente dal trigger 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 trovarlo confusionario e ci piacerebbe ricevere un tuo feedback 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 muratura.

Utilizzare le dimensioni predefinite della traccia

Con un nuovo tipo di visualizzazione, si presenta l'opportunità di ripensare i valori predefiniti delle proprietà.

Nella griglia, grid-template-columns e grid-template-rows hanno come valore predefinito none che, come attualmente definito, in genere genera una singola colonna o riga. Per la muratura, questo valore predefinito comporterebbe, il più delle volte, un layout indesiderabile.

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

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

Come mostrato nell'immagine, il contenitore a griglia crea tante colonne di dimensioni automatiche quante ne entrano nello spazio disponibile.

Con la griglia CSS, tutti gli elementi vengono posizionati prima che le tracce vengano dimensionate, il che significa che questa definizione di dimensionamento automatico delle tracce non è possibile. Tuttavia, con il layout a griglia CSS, questa limitazione non si applica più, poiché il posizionamento e il dimensionamento sono intrecciati e semplificati. Con questa limitazione rimossa, 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 a griglia nel layout. Tuttavia, poiché la muratura ha una sola dimensione, abbiamo implementato anche la proprietà abbreviata masonry, che puoi utilizzare per definire contemporaneamente la direzione della muratura e la definizione della traccia, senza la proprietà con prefisso grid- confusa.

Ad esempio, i seguenti due snippet di codice creeranno contenitori CSS 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"
}

L'abbreviazione masonry è ancora in fase di discussione da parte del CSS Working Group. Provalo oggi stesso e facci sapere cosa ne pensi.

Scegliere dimensioni della traccia personalizzate

Per quanto riguarda la definizione delle dimensioni delle tracce, il layout a griglia è flessibile come la griglia nel consentirti di ottimizzare il numero e le dimensioni delle tracce del layout. Le tracce a griglia non devono avere tutte le stesse dimensioni, ad esempio:

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

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

Coprono più tracce

Nel layout a griglia, gli elementi non devono essere vincolati alle tracce in cui sono posizionati, ma possono estendersi su più tracce, se necessario. Questa funzionalità 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;
}

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

.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 visualizzare l'annuncio di abbonamento all'interno degli articoli.

Ottimizzazione del posizionamento degli elementi della griglia

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

Immagina un contenitore a griglia con due colonne. Se il contenitore 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 si troverà 10 px più vicino all'inizio della direzione a griglia.

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 contenitore per personalizzare la variabilità nel posizionamento degli articoli:

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

Tieni presente che la specifica della bozza 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 dei modelli per dimensionare e posizionare gli elementi nell'asse della griglia di un contenitore a griglia muratura come con CSS Grid, ad esempio grid-row, grid-column, grid-area, grid-template-areas o order. Sfrutta tutta la potenza della griglia CSS quando crei il layout a griglia.

Richiesta di feedback

Non vediamo l'ora che tu possa esplorare il layout a griglia CSS, dare sfogo alla tua creatività e scoprire le nuove funzionalità che ti aiuterà a sbloccare. Un ottimo modo per iniziare è controllare 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 modellare l'API e verificare che sia progettata per soddisfare le tue esigenze sul web. Prova la griglia e facci sapere cosa ne pensi.

Se hai idee o feedback sulla forma dell'API, faccelo sapere commentando l'Issue 11243 o, se preferisci scrivere un post sul tuo blog o sui social media, assicurati di farcelo sapere su X o LinkedIn.

Il layout a griglia CSS è ancora in fase di implementazione in Chromium. Se lo 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 il packing denso, il posizionamento inverso, il supporto delle sottogriglie, il supporto out-of-flow, il supporto della linea di base, il supporto di DevTools, il supporto della frammentazione, il supporto della decorazione degli spazi vuoti, tra gli altri.

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