BoldSpan Bento Grid is a free WordPress bento grid plugin for building modern, responsive websites in Gutenberg and Elementor. Create magazine-style homepages, image galleries, portfolios, blog sections, service grids, team sections, product highlights, and landing page layouts without writing CSS.

Choose a professional bento box layout, add your content, and publish a polished responsive grid in minutes. The same lightweight CSS Grid engine powers the editor preview and the front end, so your layout looks the way you designed it.

Unlike a generic column block, this responsive grid plugin gives you curated bento layouts, per-tile content controls, image overlays, typography-friendly heading levels, and optional hover effects in one focused interface.

It is made for freelancers, agencies, bloggers, photographers, designers, creators, small businesses, online stores, and anyone who wants a more visual WordPress website layout without hiring a developer.

Why site owners choose BoldSpan Bento Grid

Build a responsive bento grid directly in the WordPress block editor or Elementor.
Start with nine professionally arranged layouts instead of designing every column from scratch.
Create an image gallery, portfolio, product highlights, services section, or editorial feature grid.
Keep pages fast with CSS-based layout and hover effects, without a front-end JavaScript dependency.
Make changes visually with controls that are approachable for beginners and useful for designers.

Choose a curated preset, drop in your tiles, and the grid takes care of the geometry. Every tile can show an image with an overlay, text above or below its image, or a free-form stack of inner blocks.

Get started in one click

Nine ready-made patterns – one per layout – in the inserter under Patterns > Bento Grid. Each drops in a finished section built from gradients and text, so it looks designed before you add a single image.
Or add the block and hit Fill with demo content to populate the empty tiles. Tiles you have already edited are left alone.

Layout

Nine curated presets for 2 to 5 tiles: Split 50/50, Asymmetric 70/30, Hero Focus, Triple Row, Balanced Quad, Showcase 4, Feature 5, Asymmetric 5, and Strip 5.
The preset list follows the tile count, and the number of tiles is controlled with a single slider.
Padding and margin controls for the grid container, linked or set per side (top, right, bottom, left).
Row height slider, with an option to let a tile with more text stretch its row instead of clipping.
One 12-column CSS Grid engine – no per-block inline layout hacks.

Tiles

Content modes: image overlay (with an adjustable shadow that keeps overlaid text readable), text on top, text below, or custom inner blocks.
Per-tile design controls: background colour or CSS gradient, text colour, border width and colour.
Opt-in hover micro-interactions: lift, image zoom, and glow – all pure CSS, no runtime cost.
Choose the title heading level (H2-H6, or a paragraph) so the page outline stays in order.
Link options: open in a new tab, and rel=”nofollow”.

Responsive

Under 768px every layout collapses to a single stacked column.
Between 768px and 1024px the 4- and 5-tile presets step down to two columns.
The same breakpoints apply inside the editor canvas, so what you see is what you publish.

Built for real sites

Works identically in the Gutenberg block editor and the Elementor page builder (widget lives under the “BoldSpan Bento” category).
All markup is wrapped in a .boldspan-bento-wrapper namespace so active themes and Elementor global styles cannot override the grid gap, tile padding, or typography.
Accessibility: tiles expose an aria-label from their title, the title heading level is author-controlled, and all motion respects prefers-reduced-motion.
Security-first: every URL is passed through esc_url(), CSS values are filtered, and numeric ranges are clamped before output.
Translation-ready with the boldspan-bento-grid text domain.

Source Code

This plugin ships compiled JavaScript and CSS in the build/ directory. The
human-readable sources – TypeScript and SCSS under src/, the block metadata,
and the full build pipeline – live in the public development repository:

https://github.com/boldspantechnologies/Bold-Bento-Grid

Build tools: Node.js 18+ and npm, with
@wordpress/scripts (webpack).

npm install – install the build toolchain.
npm run build – compile src/ into build/ (boldspan-bento/grid block, tile block, front-end runtime, stylesheet).
npm run package – clean, build, and produce dist/boldspan-bento-grid.zip containing only the files WordPress needs.

The text domain is boldspan-bento-grid throughout (plugin header, every __() /
_e() call, both block.json files, and wp_set_script_translations()).
Translations are handled by translate.wordpress.org.