The bento layout — borrowed from the compartmentalised Japanese lunchbox — has quietly become one of the most recognisable patterns in modern web design. Cells of different sizes lock together into a grid that feels both orderly and editorial. The Bento Grid widget for Elementor brings that pattern to WordPress as a true drag-and-drop builder, where every cell is a full Elementor container you can fill with anything: an image, a stat, an icon, a button, or a whole nested layout.
What Is the Bento Grid Widget?
The Bento Grid is a nested-element widget. Instead of a fixed list of fields, it gives you a responsive CSS grid and lets you drop containers into it as cells. Each cell is styled, sized, and filled independently, while the grid handles columns, gaps, and row height. Because the Elementor Bento Grid is built on real containers, anything you can design in Elementor can live inside a single cell — there is no separate, limited cell editor to fight with.
Key Features of the Bento Grid Widget
- Drag-and-drop cells — every cell is a native Elementor container, so you design its contents with the tools you already know.
- Layout presets — switch instantly between hero (one large feature cell), feature (a full-width banner row), and mosaic (alternating tall cells).
- Responsive columns and gaps — set different column counts and spacing for desktop, tablet, and mobile, with dense auto-flow to fill gaps.
- Hover and entrance motion — choose lift, scale, or glow on hover, and reveal cells one after another with a staggered scroll animation.
Why Use the Bento Grid Widget on Your Site?
A bento layout is how you say “here is everything that matters” without a wall of identical boxes. That is exactly where the Bento Grid widget earns its place. A mountain resort can lead with a two-by-two hero photo, then tuck a sunshine stat, a spa panel, and a booking button around it. A boutique eyewear label can run a full-width product banner across the top with the feature preset, then line up materials, shipping, and warranty beneath. A city lifestyle guide can use the mosaic preset to weave tall portrait photography between neighbourhood guides and reader stats. One Elementor Bento Grid, three completely different layouts — each responsive, each collapsing gracefully to a single column on phones.
Getting Started With Bento Grid in Minutes
Install Sentio Addons, drop the widget onto your page, and you start with a set of empty cells. Add or remove cells like any container, then fill each one with headings, images, icons, or buttons. Pick a preset to set the rhythm, choose your column count and gap, and set a comfortable row height. Because each cell is a normal container, you can give individual cells their own background image or colour, drop in a nested grid, or anchor a button to the bottom edge. Finally, switch on a hover effect and an entrance animation, and style the default cell background, radius, and shadow on the Style tab so every cell shares one consistent look.
See the Bento Grid Widget in Action
The widget page above this article shows three builds: a navy mountain-resort grid using the hero preset and a gentle lift on hover, a pink eyewear grid using the feature banner with a glow effect and staggered entrance, and a neutral city-guide grid using the mosaic preset with a soft scale on hover. Same widget, same Style tab, three completely different presentations.
Grids do not have to be monotonous. Reach for the Bento Grid widget for Elementor and you trade the uniform card row for a layout with hierarchy and personality. It is the kind of layout that used to require a developer and a stack of custom CSS, and now takes a few minutes inside the editor. Sentio Addons keeps shipping practical, design-system-friendly widgets like this because publishing teams need real tools, not toy components.