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.
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
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.