> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://katalyz.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Bento widget

The **Bento** widget is a configurable **grid container** — a layout shell where each cell holds its own block. Drop one in when you want a structured set of small, equal-weight items: a feature grid, a team list, a tile dashboard, a "what's included" panel.

> Think Bento box. Several compartments inside one frame, each filled independently, sized to the same outer shape.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-17-at-09515_hs53j.png =638xauto)

## How to add

1. On the **floating build bar** at the bottom of the editor, open the **⌄ All widgets** popover and locate **Bento**.
2. Drag it onto the target section.
3. By default a **2 × 2 grid** drops in, each cell showing an **+ Add a block** placeholder. Click a cell, pick a block type, and that cell is filled.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-17-at-09532_7ygort.png =1037xauto)

## The selection pill — Bento controls

Click the Bento (anywhere outside an individual cell) to select the container:

1. **Edit resource** (sliders icon) — opens the **Layout settings** popover (rows, columns, presets — see below).
2. **Design** (paintbrush icon) — opens the contextual Design panel on the Bento container itself.
3. **⋮ More** — Edit resource (same as the sliders icon) · **Duplicate** · **Delete**.

(No Size / Dark mode / Replace / Expand — the cells, not the container, hold the content.)

## Layout settings — the popover

Open via the sliders icon on the pill. Two ways to shape the grid:

### Quick layouts (preset buttons)

Eight one-click layouts:

- **2 columns** · **3 columns** · **4 columns** — a single row split into 2 / 3 / 4 cells.
- **2 × 2** · **2 × 3** · **3 × 3** — symmetric multi-row grids.
- **Left bar** — a narrow column on the left + a wider area on the right.
- **Right bar** — same but mirrored: wider on the left, narrow column on the right.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-17-at-09533_16ywyeh.png =1038xauto)

### Manual layout (rows + columns)

Below the presets, set the grid by hand:

- **Rows** — number input (with a link toggle to keep rows even).
- **Columns** — same.
- **Equalize sizes** — button. Resets any custom row/column widths back to equal distribution.

When you change rows / columns, existing cells are preserved where possible; new cells appear as empty `+ Add a block` placeholders.

## Per-cell controls

Each cell has its own behavior. Click into a cell to focus it, then:

- **Click `+ Add a block`** to drop a block type into that cell (Text, Image, Video, Link, etc. — same picker as elsewhere).
- The focused cell shows its own **⋮** menu in the top-right corner with **cell-level structural commands**:

  - **Merge down** — combine this cell with the one directly below into a single cell.
  - **Merge left** — combine with the cell to the left.
  - **Add row above** / **Add row below** — insert a fresh row of cells at that position.
  - **Add column at left** / **Add column at right** — insert a fresh column at that position.
  - **Delete row** — remove the entire row this cell belongs to.
  - **Delete column** — remove the entire column this cell belongs to.

* **Fusionner vers le bas** — combine cette cellule avec celle juste en dessous en une seule cellule.
* **Fusionner à gauche** — combine avec la cellule à gauche.
* **Ajouter une ligne au-dessus** / **Ajouter une ligne en-dessous** — insère une nouvelle ligne de cellules à cette position.
* **Ajouter une colonne à gauche** / **Ajouter une colonne à droite** — insère une nouvelle colonne à cette position.
* **Supprimer la ligne** — supprime toute la ligne à laquelle appartient cette cellule.
* **Supprimer la colonne** — supprime toute la colonne à laquelle appartient cette cellule.
![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-17-at-11412_h7yoma.png =947xauto)

Use merges to break the symmetric grid for emphasis — e.g. take a 2×3 layout and merge two cells horizontally to create a wider hero tile while keeping the others as smaller cards.

## What goes inside a cell

A Bento cell can hold any block type you can drop in via the build bar — Text, Image, Video, Link, CTA, Contact, etc. The block lives inside the cell and is selected/edited like any other block (its own selection pill).

## When to use

- **Feature grid** — 6 cells with an icon + short caption each.
- **Team showcase** — Contact cards arranged in a 2×3 grid.
- **"What's included"** — tiles describing what comes with a plan.
- **Mixed media wall** — a hero image merged across two cells, with supporting links/text in the rest.

## When NOT to use

- **Long-form content** — Bentos compress content; if you have paragraphs of narrative, use Text widgets in a regular section instead.
- **One thing per row** — if every row holds exactly one block, you don't need a Bento. Just stack widgets in a normal section with Compaction enabled.

## Related articles
- [Introduction to widgets](https://katalyz.crisp.help/en/article/introduction-to-widgets-skwh2f/)
- [Image widget](https://katalyz.crisp.help/en/article/image-widget-40o2ax/)
- [Contact widget](https://katalyz.crisp.help/en/article/contact-widget-1wpnzt/)
- [Styling sections and widgets](https://katalyz.crisp.help/en/article/styling-sections-and-widgets-6unsv7/)