Hero + features
Free Bento Grid Templates
Eight ready-made bento grid layouts, each one a real CSS grid you can take three ways: semantic grid-template-areas CSS, Tailwind span classes, or a plain HTML skeleton. These are the same templates that power our bento generator’s presets, so the Edit button opens any of them in the drag-to-merge editor — resize a region, rename it, and re-copy your customized code in seconds.
Bento layouts work when the size of a tile matches the weight of its content — heroes and featured posts earn the big spans, metadata lives in the small ones. Start from the template closest to your content’s hierarchy rather than the one that merely looks nicest empty; you will fight the grid far less.
The CSS export names every region (header, featured, sidebar), which keeps your markup readable and your grid refactorable — change the layout in the template-areas string later without touching a single component. The Tailwind export trades that semantics for utility-class convenience; both render identically.