Data di pubblicazione: 19 settembre 2024, ultimo aggiornamento: 13 febbraio 2026
Il CSS Working Group ha combinato le due proposte di CSS Masonry in una bozza di specifica. Il gruppo spera che questo renderà più facile il confronto tra i due e la decisione finale. Il team di Chrome ritiene ancora che una sintassi a griglia separata sia il modo migliore per procedere. Sebbene il problema di prestazioni più grande menzionato nel nostro post precedente sia stato risolto, permangono dubbi in merito alla sintassi, ai valori iniziali e alla facilità di apprendimento di una versione combinata con la griglia.
Per testare le nostre ipotesi, abbiamo esaminato alcuni esempi per mostrare come funzionerebbe la griglia muratura con ogni versione. Dai un'occhiata agli esempi in questo post e inviaci il tuo feedback per consentirci di prendere una decisione e procedere con questa funzionalità.
Questo post non copre tutti i possibili casi d'uso, ma è chiaro che
la separazione del layout a griglia da quello a griglia non comporterà la mancanza di funzionalità. Anzi, potrebbe essere vero il contrario. Come vedrai in questo post,
la versione display: masonry crea nuove opportunità e una sintassi più semplice.
Inoltre, molti sviluppatori hanno sollevato preoccupazioni in merito alla possibilità di
riordinare gli elementi con il layout a griglia, causando problemi di accessibilità. Questo problema
viene affrontato per entrambe le versioni della sintassi tramite la proprietà reading-flow
proposta.
Un layout a griglia di base
Questo è il layout che la maggior parte delle persone immagina quando pensa alla muratura. Gli elementi vengono visualizzati in righe e, dopo il posizionamento della prima riga, gli elementi successivi vengono spostati nello spazio lasciato dagli elementi più brevi.
Con display: masonry
Per creare un layout a griglia, utilizza il valore masonry per la proprietà display. In questo modo viene creato un layout a griglia con tracce di colonne che definisci (o
che vengono definite dai contenuti) e una griglia nell'altro asse. Il primo elemento viene
visualizzato all'inizio del blocco e in linea (quindi in alto a sinistra in inglese) e gli elementi
sono disposti nella direzione in linea.
Per definire le tracce, utilizza masonry-template-tracks con i valori di elenco delle tracce utilizzati
nel layout a griglia CSS.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Con display: grid
Per creare un layout a griglia, crea innanzitutto un layout a griglia utilizzando il valore grid
per la proprietà display. Definisci le colonne con la proprietà grid-template-columns, poi assegna a grid-template-rows il valore masonry.
In questo modo verrà creato un layout come previsto con elementi della griglia posizionati automaticamente, tuttavia gli elementi di ogni riga utilizzano un layout a griglia e verranno riorganizzati per occupare lo spazio lasciato dagli elementi più piccoli della riga precedente.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Punti da considerare tra le due opzioni
Una differenza notevole tra questi metodi è che con la versione display: masonry
ottieni un layout a griglia anche se non specifichi tracce con
masonry-template-tracks. Pertanto, display: masonry potrebbe essere tutto ciò di cui hai bisogno.
Questo perché il valore iniziale di masonry-template-tracks è repeat(auto-areas, auto). Il layout crea tutte le tracce con dimensionamento automatico che possono
essere inserite nel contenitore.
Flusso invertito con muratura
La specifica include modi per modificare la direzione del flusso a griglia. Ad esempio, puoi modificare il flusso in modo che venga visualizzato dalla fine del blocco verso l'alto.
Con display: masonry
Crea un layout a griglia con display: masonry, poi utilizza masonry-direction
con un valore di column-reverse.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
Con display: grid
Crea un layout a griglia con display: grid e grid-template-rows: masonry.
Quindi utilizza la proprietà grid-auto-flow con un nuovo valore di row-reverse per
disporre gli elementi dall'estremità del blocco del contenitore della griglia.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Punti da considerare tra le due opzioni
La versione display: masonry è molto simile al funzionamento di Flexbox. Modifica
la direzione del flusso delle colonne utilizzando la proprietà masonry-direction con un
valore di column-reverse.
La versione della griglia CSS utilizza grid-auto-flow. Come attualmente definiti,
grid-auto-flow: row-reverse e grid-auto-flow: column-reverse avrebbero
lo stesso effetto. Questo potrebbe creare confusione, in quanto potresti aspettarti che facciano
qualcosa di diverso.
Layout a griglia per le righe
Puoi anche cambiare direzione per definire le righe.
Con display: masonry
Crea un layout a griglia con display: masonry, quindi imposta il valore di
masonry-direction su row. A meno che tu non voglia che le righe abbiano una dimensione specifica del blocco, non devi specificare alcuna dimensione della traccia, poiché l'impostazione predefinita è auto, pertanto le tracce verranno dimensionate in base ai contenuti che contengono.
.masonry {
display: masonry;
masonry-direction: row;
}
Con display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Punti da considerare tra le due opzioni
Come per il flusso invertito, se modifichi la versione display: masonry da colonne a righe, devi modificare il valore di masonry-direction. Con la versione a griglia,
dovrai scambiare i valori delle proprietà grid-template-columns e
grid-template-rows. In alternativa, se utilizzi la notazione abbreviata, modifica l'ordine
della sintassi.
In entrambi questi esempi di flusso di cambio, la versione display: masonry
sembra più intuitiva. Esiste una singola proprietà che controlla il flusso
masonry-direction, che può assumere uno dei seguenti valori:
rowcolumnrow-reversecolumn-reverse
Aggiungi poi le informazioni sulle dimensioni necessarie a masonry-template-tracks,
supponendo che il valore automatico predefinito non sia quello che ti serve.
Con la griglia, per invertire la direzione devi utilizzare la proprietà grid-auto-flow e per eseguire la muratura a righe devi cambiare il valore delle proprietà grid-template-*. Inoltre, nella sintassi della griglia attuale non è possibile lasciare il valore dell'asse della griglia indefinito. Devi sempre specificare le proprietà grid-template-*
sull'asse che non ha un valore di masonry.
Posizionare gli elementi
In entrambe le versioni puoi posizionare esplicitamente gli elementi utilizzando il posizionamento basato sulle righe che conosci dal layout a griglia. In entrambe le versioni puoi posizionare gli elementi solo nell'asse della griglia, ovvero l'asse con le tracce predefinite. Non puoi posizionare gli elementi sull'asse che esegue il layout a griglia.
Con display: masonry
Il seguente CSS definisce un layout a griglia con quattro colonne. L'asse della griglia è
quindi costituito dalle colonne. L'elemento con una classe di a è posizionato dalla prima colonna
alla terza colonna, a cavallo di due tracce con le nuove
proprietà masonry-track-*. Può anche essere definito come abbreviazione di
masonry-track: 1 / 3;.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
Con display: grid
Il seguente CSS definisce un layout a griglia con quattro colonne. L'asse della griglia è
quindi costituito dalle colonne. L'elemento con una classe di a viene posizionato dalla prima riga
della colonna alla terza riga della colonna, a cavallo di due tracce con le proprietà
grid-column-*. Può anche essere definita come abbreviazione di grid-column: 1 / 3;.
Se l'asse della griglia è costituito da colonne, le proprietà grid-row-* verranno ignorate,
mentre se l'asse della griglia è costituito da righe, le proprietà grid-columns-* verranno ignorate.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
Puoi utilizzare le righe denominate con entrambe le sintassi. Gli esempi seguenti mostrano una griglia
con due linee di colonna denominate a.
Con display: masonry
Le linee denominate sono definite nel valore dell'elenco delle tracce di
masonry-template-tracks. L'elemento può essere inserito dopo qualsiasi riga denominata a.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
Con display: grid
Le linee denominate sono definite nel valore dell'elenco delle tracce di
grid-template-columns. L'elemento viene inserito dopo la prima riga denominata a. Se
la proprietà grid-row è definita, verrà ignorata.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
Puoi anche utilizzare le aree denominate in entrambe le sintassi. Gli esempi seguenti mostrano una griglia con tre tracce denominate "a", "b" e "c".
Con display: masonry
Le tracce vengono denominate come valore di masonry-template-areas. Poiché non sono definite dimensioni delle tracce, tutte e tre hanno come valore predefinito la dimensione auto. L'elemento viene inserito nella traccia "a".
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Il funzionamento è lo stesso per la definizione di righe o colonne; l'unica
differenza è la proprietà masonry-direction.
Con display: grid
Per le colonne, la sintassi è essenzialmente identica. Allo stesso modo, poiché non sono definite dimensioni delle tracce, tutte e tre hanno come valore predefinito la dimensione auto, ma devi comunque specificare esplicitamente che l'altro asse è a griglia:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Per le righe, tuttavia, il valore deve essere scritto in modo diverso, perché
grid-template-areas definisce in realtà un'area bidimensionale e ogni riga
è scritta come una stringa separata:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
Punti da considerare tra le due opzioni
Con qualsiasi posizionamento, la sintassi display: masonry funziona meglio quando si tratta
di cambiare direzione. Poiché la proprietà masonry-track-* funziona in qualsiasi
direzione dell'asse della griglia, per cambiare direzione è sufficiente modificare il
valore di masonry-direction. Con la versione a griglia, devi avere almeno
proprietà ridondanti per attivare il cambio. Tuttavia, consulta gli esempi precedenti
per altri modi in cui cambiare direzione è più complicato con la versione
a griglia.
Abbreviazioni
In questo post sono stati utilizzati i nomi completi per rendere più chiaro quali proprietà
sono in uso, tuttavia è possibile definire le versioni display: masonry e display: grid
utilizzando le abbreviazioni.
Con display: masonry
L'abbreviazione display: masonry utilizza la parola chiave masonry. Per creare il layout
a griglia di base, utilizza il seguente CSS:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Per creare un semplice layout a griglia basato sulle righe:
.masonry {
display: masonry;
masonry: row;
}
Per definire le tracce e un layout basato sulle righe con la notazione abbreviata:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
Con display: grid
Per creare il layout a griglia di base utilizzando l'abbreviazione grid.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Per creare un semplice layout a griglia basato sulle righe:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
Negli esempi più complessi, poiché la sintassi complessiva di display:masonry è
più semplice, è possibile raggruppare più proprietà nella notazione abbreviata senza che
diventi eccessivamente complessa.
Ad esempio, immagina di creare tre colonne denominate "a", "b" e "c", riempite dal basso verso l'alto.
Con display:masonry
In display: masonry, tutti e tre possono essere impostati insieme nella notazione abbreviata:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Poiché le dimensioni vengono regolate automaticamente, non è necessario specificarle, ma se
preferisci una dimensione specifica, puoi aggiungerla. Ad esempio
masonry: column-reverse 50px 100px 200px "a b c";.
Inoltre, ogni componente può essere riordinato liberamente; non esiste un ordine specifico che devi ricordare. Se invece vuoi utilizzare le righe, ti basta
scambiare column-reverse con row o row-reverse; il resto della sintassi rimane
invariato.
Con display: grid
In display: grid, questi tre aspetti devono essere impostati separatamente:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Come nell'esempio di muratura, in questo modo tutte le colonne hanno dimensioni auto, ma se
vuoi fornire dimensioni esplicite, puoi farlo:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Oppure, se vuoi utilizzare "grid" per impostare contemporaneamente dimensioni e nomi delle aree:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
In entrambi questi esempi, l'ordine è strettamente necessario e diverso se volessi invece le righe. Ad esempio, il passaggio alle righe ha il seguente aspetto:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
In alternativa, per riassumere il tutto:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Punti da considerare tra le due opzioni
L'abbreviazione display: masonry è probabilmente molto utilizzata, dato che è
relativamente semplice. In molti casi, per un layout "standard" a griglia, devi solo impostare le definizioni delle tracce; tutti gli altri valori possono assumere il valore predefinito.
La versione display: grid utilizza l'abbreviazione
grid esistente, che è
piuttosto complessa e, secondo la nostra esperienza, meno utilizzata dagli
sviluppatori. Come mostrato negli esempi precedenti, anche quando viene utilizzato per semplici
layout a griglia, richiede attenzione quando si imposta l'ordine dei valori.
Altre considerazioni
Questo post esamina alcuni casi d'uso comuni oggi, ma non sappiamo cosa
potrebbe riservare il futuro per la griglia o la muratura. Un valido motivo per utilizzare la sintassi separata
display: masonry è che consente ai due elementi di divergere in futuro. In
particolare con i valori iniziali, ad esempio quelli per masonry-template-tracks, potrebbe
essere utile fare qualcosa di diverso in muratura rispetto alla griglia. Non possiamo
modificare le impostazioni predefinite della griglia se scegliamo la versione display: grid, il che potrebbe
limitare le cose che potremmo voler fare in futuro.
In questi esempi, puoi vedere i punti in cui il browser deve ignorare
le proprietà valide nella griglia se utilizzi il layout a griglia.
Ad esempio, grid-template-areas, dove la maggior parte dei valori viene
eliminata perché definisce un layout a griglia bidimensionale, nel layout a griglia
definisce completamente una sola direzione.
Fornisci il tuo feedback
Dai un'occhiata a questi esempi e anche alla bozza delle specifiche, che mostra ogni versione accanto all'altra. Facci sapere cosa ne pensi commentando il problema 9041 o, se preferisci scrivere un post sul tuo blog o sui social media, assicurati di comunicarcelo su X o LinkedIn.