Masonry Grid — Free HTML CSS JS Pinterest Snippet

A masonry grid displays items in a multi-column layout where items of different heights fill columns naturally from top to bottom — like a Pinterest or photo gallery layout, often wired to an image lightbox on click. This snippet implements masonry using the CSS columns property.

The CSS columns approach

.masonry { columns: 3; column-gap: 12px } is the entire masonry layout. The browser fills columns from top to bottom, stacking items by height. No JavaScript positioning is needed. @media (max-width: 600px) { .masonry { columns: 2 } } reduces to two columns on mobile.

break-inside: avoid

.item { break-inside: avoid } prevents a single card from splitting across two columns. Without this, tall cards can be split at the column boundary.

JS card rendering

Cards are rendered from a JS data array rather than static HTML. Each item has a title, subtitle, height, gradient, and like count. items.forEach(item => { const div = document.createElement('div'); ... container.appendChild(div) }) builds the grid dynamically. This makes it easy to filter, sort, and update items.

How CSS columns masonry works

CSS columns: 3 divides the container into 3 equal-width columns. Child elements fill top-to-bottom in columns — left column fills first, then centre, then right. break-inside: avoid prevents a single card from splitting across two columns. The browser handles variable-height items automatically — short cards and tall cards coexist naturally without JavaScript height calculation.

Advantages over JavaScript masonry libraries

Libraries like Masonry.js calculate absolute positions for each item using JavaScript, which requires a reflow after images load and creates complex dependencies. The CSS columns approach has zero JavaScript, works without images loading, recalculates on window resize automatically, and has no dependencies. The trade-off is that columns fill left-to-right before top-to-bottom — items do not arrange by insertion order across columns.

Adding new items dynamically

Since CSS columns is layout-based, adding new items via JavaScript (container.appendChild(newCard)) automatically triggers reflow and the masonry repositions. No JavaScript layout recalculation is needed. The grid updates instantly.

Responsive masonry

Change columns count responsively: @media (max-width: 900px) { .masonry { columns: 2; } } @media (max-width: 600px) { .masonry { columns: 1; } }. Or use the CSS columns auto-fill: columns: auto; column-width: 280px — the browser places as many 280px columns as fit the container width, similar to the responsive card grid but for a top-down fill pattern.