BoldSpan Bento Grid

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.