Photo Masonry
A CSS-columns masonry gallery of twelve Placeholder images in mixed aspect ratios that form a dense visual wall of travel photography.
A CSS-columns masonry gallery of twelve Placeholder images in mixed aspect ratios that form a dense visual wall of travel photography.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Photo Masonry builds a dense visual wall from twelve Placeholder images in mixed aspect ratios via CSS columns, three columns on large screens and two on medium. The frames run from Reykjavik in March 2025 to Valletta in June 2023, each with a location and date that surface on hover. Aspect ratios alternate between 4/5, square, and 4/3 so the columns fill at different heights and the wall never feels gridded.
Photos are one array; each entry carries its own aspect string so the column layout distributes naturally without JavaScript. The mixed heights are the whole point.
Reach for this block on a photography portfolio or editorial site where the work spans many formats and a uniform grid would flatten the variety. The installer swaps the Placeholder tiles for real images and updates each location and date.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the travel photography wall. Other masonry uses:
Tip: alternate aspect ratios deliberately in the array; three square images in a row will column-lock and defeat the masonry feel.