Grid Lanes are the current native masonry direction for CSS Grid. You define lanes on one axis and the browser packs mixed-height items into them.
.gallery {
display: grid-lanes;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}