Bento Work Grid
An asymmetric four-column project grid where two tiles span two columns at a wide aspect ratio and four sit at standard size, each captioned with category, role, and year.
An asymmetric four-column project grid where two tiles span two columns at a wide aspect ratio and four sit at standard size, each captioned with category, role, and year.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Bento Work Grid arranges six projects in a four-column grid where two tiles, Ledger and Field Notes, span two columns with a 16/10 aspect ratio while the four others sit at 4/3. The caption under each tile names the category, the role, and the year, so Ledger reads as Fintech dashboard, Lead product design, 2025 rather than just a project name. A Full archive link sits top-right.
Projects are one typed array with a wide boolean that drives the span and aspect class. The mixed column span is the distinctive choice; hierarchy without a featured slot that dominates everything else.
Reach for this block as the work section of a homepage or a work index page for a designer with a varied practice. The installer swaps the project names, categories, roles, years, and Placeholder tiles for their real work.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the asymmetric selected-work grid. Other bento grid uses:
Tip: put your two strongest projects in the wide slots; the span draws the eye first, so it must deliver first.