Masonry With Captions
A CSS-columns masonry of six project tiles at mixed aspect ratios, each captioned with the project name, role, and year.
A CSS-columns masonry of six project tiles at mixed aspect ratios, each captioned with the project name, role, and year.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Masonry With Captions displays six project tiles in a CSS-columns masonry at mixed aspect ratios: 4/3, square, 4/5, video, and others across three columns. Each tile carries the project name, the role, and the year: Meridian lead product design 2025, Loom Health design and research 2025, Vessel prototyping and motion 2023. The mixed heights create visual rhythm that a uniform grid cannot.
Projects are one array with name, role, year, and aspect. The per-tile aspect field is the distinctive choice: it lets a photography-heavy or mixed-discipline portfolio show range in a single scrolling view rather than forcing every project into the same crop.
Use this block as the work section of a homepage or a dedicated work page when the portfolio spans multiple disciplines or formats. The installer swaps the Placeholder tiles for real project images and keeps the role line honest about their actual contribution.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the mixed-discipline work overview. Other grid formats:
Tip: vary the aspect ratios deliberately; two square tiles beside a 4/5 portrait create more movement than six identical crops.