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