CSS Masonry with grid-template-rows: masonry is experimental. Use CSS columns as a stable fallback: columns: 3; column-gap: 1rem with break-inside: avoid on items. Masonry.js provides a reliable JavaScript solution.
Masonry Layout
/* Native masonry (Safari + Firefox with flag) */
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 16px;
}
/* Fallback with CSS columns */
.masonry-columns {
columns: 3;
column-gap: 16px;
}
.masonry-columns .item {
break-inside: avoid;
margin-bottom: 16px;
}