The bento grid became the default feature section for a reason worth naming: it lets you show six things while saying one of them matters more, without writing a sentence about hierarchy. A uniform three-by-two grid treats every feature as equal. A bento does not, and that is the entire value.
86 components on 21st carry the bento tag. Below is what makes one work and where it stops being the right shape.
The grids
Bento Grid by Manu Arora and Bento Grid by kokonutd are the two most-taken versions, from opposite ends of the aesthetic range. bento grid 01 by Awanish Verma is a plainer take, and Bento Card by 0xUrvish is the single cell as its own component, which is the right primitive if you are laying the grid out yourself.
Bento Product Features by Kavi Katiyar is the version tuned for a feature section, and Magnified Bento by 0xUrvish adds pointer magnification.
For media rather than features, Interactive Bento Gallery by Anurag Mishra and Bento Gallery by Ravi Katiyar are the photo-grid versions, covered further in the gallery guide.
What makes one work
One cell is bigger, and it is the right one. The layout is an argument about priority. If the large cell holds the third-most-important feature because it had the nicest screenshot, the section is lying.
Cells carry different content types. A bento reads as designed when the big cell holds a demo, one holds a stat, one holds a quote and one holds a list. Six cells of title-plus-paragraph in different sizes reads as a grid with a bug.
Six to eight cells. Past that it stops being composed and becomes a wall. Under four, a plain row is clearer.
The tallest cell sets the rhythm. Decide the row heights deliberately with grid-template-rows rather than letting content decide, or the layout shifts as copy changes.
The mobile problem, which is most of the work
A bento is a desktop layout. On a phone every cell becomes full width and stacks, which means the hierarchy you built with size disappears completely.
Three ways out, in order of how well they work. Reorder for mobile so the important cell is first, using order rather than duplicating markup. Let two small cells stay side by side at half width, keeping some rhythm. Or accept the stack and carry the hierarchy in the copy instead, since a first cell is a hierarchy of its own.
What does not work is scaling the desktop grid down: a two-column bento at 375px is six unreadable boxes.
The markup
A bento is a list of features, and it should be one. A <ul> of <li> cells, each with a heading and its content, gives a screen reader the count and the boundaries. A set of sibling divs positioned by grid area gives it nothing, and the visual hierarchy that carries the meaning is invisible without sight.
If a cell is clickable, use the stretched-link pattern from the card guide rather than an onClick on the cell.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| CSS grid | The layout itself, which is genuinely a few lines | You design the composition |
| shadcn/ui | Card as the cell | No grid, no composition |
| Tailwind Plus | Conventional feature sections with the breakpoints decided | Paid, and shared with everyone using it |
| 21st | Finished grids, feature bentos, galleries and magnified variants | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a bento grid, get the previews inline, and let the agent write the file.
Frequently asked
- What makes a bento grid work?
- One cell is bigger and it holds the genuinely most important thing, the cells carry different content types rather than six variations of title-plus-paragraph, there are six to eight of them, and the row heights are set deliberately so the layout does not shift as copy changes.
- How do you make a bento grid responsive?
- Not by scaling it down. On a phone every cell goes full width and the size hierarchy disappears, so reorder with the order property to put the important cell first, or let two small cells stay side by side at half width to keep some rhythm. A two-column bento at 375px is six unreadable boxes.
- What markup should a bento grid use?
- A list. An unordered list of cells, each with a heading and its content, gives a screen reader the count and the boundaries. Sibling divs positioned by grid area give it nothing, and the visual hierarchy carrying the meaning is invisible without sight.
- When is a bento grid the wrong layout?
- When there are fewer than four items, where a plain row is clearer, or more than eight, where it becomes a wall. Also when the items genuinely are equal: forcing a hierarchy the content does not have makes the section read as arbitrary.