BoldSpan Bento Grid

Description

BoldSpan Bento Grid helps you build bento grid layouts in WordPress: the clean, boxy, modern sections you see on product and SaaS websites. It works as a Gutenberg block and an Elementor widget, and you don’t need to write any CSS.

Pick a layout, drop in your images and text, and publish. The grid is responsive, lightweight, and looks the same in the editor as on your live site.

Want a clean, modern website without hiring a designer?

Most page sections end up as rows of equal columns. A bento grid mixes large and small tiles, so the most important content stands out and the page feels designed, not assembled. BoldSpan Bento Grid gives you that look in a few clicks:

• Choose from 9 ready-made bento layouts for 2 to 5 tiles.
• Start from 9 designed patterns that look finished before you add a single image.
• Put text in any of 9 positions over an image. A soft shade follows the text so it stays readable.
• Add subtle hover effects (lift, image zoom, glow) to one tile or to every tile at once.

What is a bento grid?

A bento grid is a layout of rectangular tiles of different sizes, arranged like the compartments of a Japanese bento box. It is a popular web design trend because it shows several pieces of content at once while keeping a clear visual hierarchy: one hero tile, a few supporting tiles, all aligned on one grid.

What you can build

• Homepage hero sections with one large feature tile and smaller highlights
• Image galleries and photography portfolios
• Feature grids for SaaS, apps and product launches
• Services sections for agencies, freelancers and local businesses
• Blog and magazine layouts that highlight featured posts
• Product highlights for online stores
• Team, testimonial and “about us” sections
• Landing page sections that convert better than plain columns

Who it is for

Bloggers, designers, photographers, freelancers, agencies, small businesses, store owners and anyone building with the block editor or Elementor. Beginners get sensible defaults; designers get control over spacing, colours, borders and typography levels.

Key features

Layouts

• 9 curated presets: Split 50/50, Asymmetric 70/30, Hero Focus, Triple Row, Balanced Quad, Showcase 4, Feature 5, Asymmetric 5 and Strip 5.
• Change the number of tiles with one slider; the preset list follows the count.
• Row height control, with an option to let a tile with more text grow its row instead of clipping.
• Padding and margin for the grid, linked or per side.
• One 12-column CSS Grid engine shared by the editor and the front end.

Tiles

• Image & text tiles with an overlay shade, or custom blocks for anything else (buttons, lists, icons, embeds).
• Text position on a 3 × 3 grid: top, middle or bottom, left, centre or right.
• Background colour or CSS gradient, text colour, border width and colour per tile.
• Title heading level (H2 to H6, or a paragraph) to keep your page outline and SEO structure correct.
• Links make the whole tile clickable, with “open in new tab” and rel="nofollow" options.

Hover effects

• Combine effects per tile: a motion (lift), image zoom and a glow highlight.
• Set one hover style for all tiles from the grid, or fine-tune tiles one by one.
• Pure CSS, and switched off automatically for visitors who prefer reduced motion.

Responsive by default

• Under 768px every layout stacks into a single column.
• Between 768px and 1024px the 4- and 5-tile layouts step down to two columns.
• The editor canvas uses the same breakpoints, so what you see is what you publish.

Fast and lightweight

• No jQuery and no page-builder framework. Layout and free hover effects are pure CSS.
• Styles load only on pages that contain a grid, never site-wide.
• Static block markup: your content is saved as plain HTML, so pages stay fast and cache-friendly.

Works with your theme

• Inherits your theme’s fonts and colours, while gap, padding and sizing stay locked so themes can’t distort the grid.
• Works with block themes, classic themes and Elementor.
• The Elementor widget outputs the same HTML as the block, from the same stylesheet.

Accessible, secure, translation-ready

• Tiles get an aria-label from their title, heading levels are yours to choose, and motion respects prefers-reduced-motion.
• Every URL is escaped, CSS values are filtered and numbers are clamped before output.
• Translation-ready (boldspan-bento-grid text domain).

How it works

1. Add the Bento Grid block (or drag the Bento Grid widget in Elementor).
2. Pick a layout and the number of tiles, or insert a ready-made pattern from Patterns → Bento Grid.
3. Add images, text and links. Click Fill empty tiles to preview the layout with demo content first.

Gutenberg and Elementor

Use whichever editor you like. In the block editor, the grid is a native block with its own tile blocks. In Elementor, the widget lives under the BoldSpan Bento category and has the same layouts, tile options and hover effects. The front-end output is identical.

Bento Grid Pro (optional)

The free plugin is complete on its own. If you want more, the separate Bento Grid Pro add-on adds:

• 17 more layouts and up to 12 tiles per grid
• 3D tilt, hover caption reveal, animated gradient border and a cursor spotlight
• Glass (frosted blur) tiles
• Scroll reveal animations: fade, slide and zoom

Pro options appear in the editor with a small lock badge so you can see what they do. If a Pro licence ever expires, your published pages keep their Pro layouts and effects. Nothing on your site breaks.

Support

Questions, bugs or ideas? Post in the support forum here on WordPress.org, or email bentogrid@boldspan.tech.

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.