Copy-ready code
Bento Layouts with CSS Grid
Bento layouts divide a page into tiles of different sizes, with one clear focal point. These four examples cover a classic layout, editorial page, dashboard, and gallery, with named grid areas and mobile layouts.
Classic bento
A hero tile surrounded by supporting content. Named grid areas keep the layout readable, and one media query turns it into a mobile column.
Editorial bento
An editorial layout with a tall text tile, two medium tiles, and a closing strip, arranged like a newspaper.
article
Editorial layout
Dashboard bento
A dashboard layout: metrics above, a large chart, and a list alongside. Dense placement fills available gaps.
Dashboard
Gallery bento
A portfolio layout with square tiles and two larger focal tiles. Dense placement helps fill gaps as the grid rearranges.
Mixed gallery
Use the example in your project
Copy the HTML and CSS for the same piece. If a JavaScript button is shown, include that script too. Keep IDs unique, update links, and test keyboard focus and small screens. These examples demonstrate front-end behavior; forms do not create accounts or submit real orders. Names, testimonials, prices, and metrics are illustrative sample content.
All component categories · CSS generators · Downloadable templates