Title: BoldSpan Bento Grid
Author: BoldSpan Technologies
Published: <strong>September 17, 2026</strong>
Last modified: September 17, 2026

---

Search plugins

![](https://ps.w.org/boldspan-bento-grid/assets/banner-772x250.png?rev=3699801)

![](https://ps.w.org/boldspan-bento-grid/assets/icon-256x256.gif?rev=3699801)

# BoldSpan Bento Grid

 By [BoldSpan Technologies](https://profiles.wordpress.org/boldspan/)

[Download](https://downloads.wordpress.org/plugin/boldspan-bento-grid.1.0.1.zip)

 * [Details](https://wordpress.org/plugins/boldspan-bento-grid/#description)
 * [Reviews](https://wordpress.org/plugins/boldspan-bento-grid/#reviews)
 *  [Installation](https://wordpress.org/plugins/boldspan-bento-grid/#installation)
 * [Development](https://wordpress.org/plugins/boldspan-bento-grid/#developers)

 [Support](https://wordpress.org/support/plugin/boldspan-bento-grid/)

## Description

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](https://nodejs.org/) 18+ and npm, with
 [@wordpress/scripts](https://www.npmjs.com/package/@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.

## Screenshots

[⌊The Bento Grid block in the editor with the visual layout-preset picker.⌉⌊The 
Bento Grid block in the editor with the visual layout-preset picker.⌉[

The Bento Grid block in the editor with the visual layout-preset picker.

[⌊A four-tile "Showcase" layout on the front end.⌉⌊A four-tile "Showcase" layout
on the front end.⌉[

A four-tile “Showcase” layout on the front end.

[⌊Per-tile content-mode, hover, colour, and border controls, with Pro features marked.⌉⌊
Per-tile content-mode, hover, colour, and border controls, with Pro features marked
.⌉[

Per-tile content-mode, hover, colour, and border controls, with Pro features marked.

[⌊The same grid collapsing to a single column on mobile.⌉⌊The same grid collapsing
to a single column on mobile.⌉[

The same grid collapsing to a single column on mobile.

## Blocks

This plugin provides 2 blocks.

 *   Bento Grid A minimal, modern Bento-style grid layout block.
 *   Bento Tile A single image or content tile inside a Bento Grid.

## Installation

 1. Upload the `boldspan-bento-grid` folder to `/wp-content/plugins/`, or install the
    plugin through the **Plugins > Add New** screen.
 2. Activate **BoldSpan Bento Grid** through the **Plugins** screen.
 3. Open the **Get started** link in the plugin’s row on the Plugins screen for a short
    walkthrough covering both the block editor and Elementor. The same link is offered
    in a dismissible notice after activation.
 4. In the block editor, add the **Bento Grid** block. In Elementor, drag the **Bento
    Grid** widget from the **BoldSpan Bento** category.

## FAQ

### How many tiles can a grid have?

Two to five, with a curated preset for every count. A separate commercial add-on,
BoldSpan Bento Grid Pro (https://bentogrid.boldspan.tech), lifts the tile cap and
adds six more presets, glassmorphism, advanced hover motion, and dynamic WooCommerce/
query grids. Those extras are shown in the editor with a lock badge so you can see
what they do; this plugin is fully functional on its own without them.

### Will it match my theme?

Yes. Tiles inherit your theme’s font family and body colour, but the grid gap, tile
padding, and heading/caption sizing are locked to the plugin’s own values inside
the `.boldspan-bento-wrapper` namespace so theme rules can’t distort the layout.

### Is the Elementor output the same as the block output?

Yes – both produce the same HTML wrapper, classes, and `data-bento-grid` attribute,
and share one stylesheet.

### Does it support reduced motion?

Yes. When the operating system requests reduced motion, all hover transitions and
transforms are disabled.

### Does the plugin load anything on pages that don’t use a grid?

No. The front-end stylesheet and runtime are only enqueued on requests that actually
render a Bento Grid block or widget.

### Does the plugin send anything to an external service?

Only when you press a button that says it will, and never from the front end.

Three actions contact Discord, where the BoldSpan team receives them:

 1. Pressing “Start setup” on the welcome screen sends your site name and site URL.
    This happens once per site so we know an install happened.
 2. Deactivating the plugin sends your site name, your site URL, and whether you had
    pressed “Start setup”, so we can see what is not working for people.
 3. Submitting the “Get early access” form sends the email address you type, the feature
    area you pick, and the same site name and URL, so we can tell you when Pro is released.

That is the whole list. No version numbers, no server details, no environment report.
Nothing is sent on page loads, on activation, or from visitor-facing pages, and 
no data about your visitors or your content ever leaves the site. The first and 
third need a logged-in editor and a valid nonce; the second runs inside the deactivation
request WordPress has already authorised. Site owners who want all of it switched
off can return false from the `boldspan_bento_grid_notifications_enabled` filter.

The service is Discord, operated by Discord Inc. Terms: https://discord.com/terms
Privacy policy: https://discord.com/privacy

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“BoldSpan Bento Grid” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ BoldSpan Technologies ](https://profiles.wordpress.org/boldspan/)

[Translate “BoldSpan Bento Grid” into your language.](https://translate.wordpress.org/projects/wp-plugins/boldspan-bento-grid)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/boldspan-bento-grid/),
check out the [SVN repository](https://plugins.svn.wordpress.org/boldspan-bento-grid/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/boldspan-bento-grid/)
by [RSS](https://plugins.trac.wordpress.org/log/boldspan-bento-grid/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.0.0

 * Initial release.
 * “Get started” screen with block-editor and Elementor instructions, reachable 
   from the Plugins screen and from a dismissible activation notice.
 * CSS Grid engine with nine curated presets (2-5 tiles) shared between the block
   editor and the front end.
 * Gutenberg block (`boldspan-bento/grid` + `boldspan-bento/tile`) with a static
   save renderer.
 * Elementor widget producing byte-identical markup.
 * Per-tile content modes, design controls, and opt-in hover effects (lift, image
   zoom, glow).
 * Grid padding and margin controls in both editors, with the grid background filling
   the padding.
 * Nine block patterns in a “Bento Grid” category, plus a “Fill with demo content”
   button on an empty grid.
 * Row height control with optional content-driven growth.
 * Per-tile heading level (H2-H6 or paragraph), and new-tab / nofollow link options.
 * Pro features shown in-editor with lock badges and an upgrade path, gated behind
   the `boldspan_bento_grid_is_pro_active` filter.
 * Mobile (<768px) and tablet (768-1024px) responsive breakpoints, applied in the
   editor and on the front end.
 * `.boldspan-bento-wrapper` CSS isolation namespace.
 * Accessibility: title-based `aria-label`s and full `prefers-reduced-motion` support.
 * Output hardening: `esc_url()` / `esc_html()` / `esc_attr()` on all output, CSS-
   value filtering, and clamped numeric ranges.
 * Translation-ready (`boldspan-bento-grid` text domain).

## Meta

 *  Version **1.0.1**
 *  Last updated **6 hours ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 6.4 or higher **
 *  Tested up to **7.1**
 *  PHP version ** 7.4 or higher **
 * Tags
 * [bento grid](https://wordpress.org/plugins/tags/bento-grid/)[elementor](https://wordpress.org/plugins/tags/elementor/)
   [gutenberg](https://wordpress.org/plugins/tags/gutenberg/)[responsive layout](https://wordpress.org/plugins/tags/responsive-layout/)
 *  [Advanced View](https://wordpress.org/plugins/boldspan-bento-grid/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/boldspan-bento-grid/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/boldspan-bento-grid/reviews/)

## Contributors

 *   [ BoldSpan Technologies ](https://profiles.wordpress.org/boldspan/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/boldspan-bento-grid/)