CSS masonry gallery (Pinterest style)

CSS masonry gallery (Pinterest style): what it is for

A masonry layout fits photos of different heights into columns without gaps, like Pinterest. Paste the photo URLs and choose the columns on phone, tablet and desktop, the spacing, the corners and the caption over the photo.

The code uses CSS columns, which works in every browser, and adds native CSS masonry (display: grid-lanes, released in Safari 26.4 in March 2026 and not yet stable in Chrome and Firefox) inside an @supports rule, as progressive enhancement recommends. The page explains the difference in order between the two techniques.

How to use

1. Paste the photo URLs.
2. Adjust columns, spacing and corners.
3. Copy the code.

When to use it

• Photographer portfolio.
• Gallery of work from a salon or studio.
• Inspiration board.

Frequently asked questions

What is a masonry layout?

It is a grid where the items have the same width but different heights, and each one fits right below the previous one in its column, leaving no empty spaces. It became known through Pinterest and works well with a mix of vertical and horizontal photos.

Does it need JavaScript?

No. The code uses CSS columns, which works in every browser. Where native CSS masonry already exists (display: grid-lanes, released in Safari 26.4 in March 2026), an @supports rule turns on the new version, which keeps the photo order from left to right.

Why does the photo order change with CSS columns?

With columns, the photos go down the first column and only then move to the second, like in a newspaper. If order matters (newest first, for example), put the most important ones at the start of the list and use few columns, or wait for grid-lanes to reach the other browsers.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools