Every SaaS landing page grew a bento grid after Apple made them fashionable, and the internet collectively decided they must be hard. They're not. A bento is a plain CSS grid with deliberate span rules — the craft is in the ratios, not the technology.
Velocity X ships a family of them — bento-grid-asymmetric, bento-tall-feature, bento-card-shells — all pure .astro, zero client JS, because a grid that doesn't move doesn't need a framework.
The Money Pattern
One grid, explicit spans, no absolute positioning anywhere:
<div class="grid grid-cols-1 gap-4 md:grid-cols-4 md:grid-rows-2">
<div class="md:col-span-2 md:row-span-2">…</div> <!-- hero cell -->
<div class="md:col-span-2">…</div>
<div>…</div>
<div>…</div>
</div>The asymmetry that reads as "designed" is just one cell spanning 2×2 while its neighbours take singles. Want the tall-feature variant? Swap the hero cell to md:row-span-2 md:col-span-1 and let the content column breathe.
The Catch
Mobile is where bentos die, and the failure is always the same: the grid collapses to one column in DOM order, and DOM order was chosen for the desktop composition. Your 2×2 hero was placed third for visual balance — now it renders third on a phone, under two minor cells.
The fix costs nothing: author the DOM in reading-priority order and place cells with span utilities only. If you're reaching for order-* utilities to repair the collapse, the DOM order is wrong — fix it there, and screen readers get the same priority for free.
Second trap: equal-height syndrome. grid-rows-2 means a short cell stretches. Put the stretch where it helps (imagery, gradients) and never in a cell whose content is a lonely paragraph — that's the "child drew this" tell.
The Verdict
A bento grid is 20 lines of Tailwind and three good decisions. Steal the decisions: spans over positioning, DOM in reading order, stretch only where content can absorb it. Or install the decided version — the Bento & Layout category has 25 of them, Astro-first, source you own.