Bento Grid Builder
Free bento grid builder: design modern tile layouts visually, preview live, and export clean….
How to use this tool
Arrange your tiles
Pick columns, add tiles, and set each tile's size, color, heading and text.
Preview live
The preview updates instantly and looks like a real landing-page section.
Export the code
Hit Generate HTML + CSS, copy the code, and paste it into your website.
Frequently asked questions
What is a bento grid?
A layout style made popular by Apple — a grid of rounded tiles in different sizes, like a bento box. It packs a lot of content into a clean, scannable section.
Will the exported code work on my site?
Yes. It is plain HTML and CSS with no dependencies — paste it into any page, WordPress custom HTML block, or static site.
Is the grid responsive?
The exported CSS collapses to two columns on small screens. You can tweak the media query in the exported code to fit your design.
How many tiles can I add?
Up to 8 tiles, which is plenty for a landing-page section. Each tile can span multiple columns and rows.
Can I change fonts and colors later?
Of course — the exported code is yours to edit. Tile colors are inline styles, so they are easy to restyle.