When Everything Is Equal, Nothing Is.

Describe your product's story and MeDo generates a bento grid — one large hero cell that carries the narrative, smaller cells that carry the detail, and the freedom to mix a screenshot, a live stat, and a customer quote inside one asymmetric layout. Unlike a uniform feature grid, the layout itself is the argument.

Area Is the Loudest Voice on the Page — a Bento Grid Speaks With It

A uniform feature grid makes an accidental claim: six identical cards tell the visitor that all six features matter equally, which is never true, and forces the headline to do all the prioritizing alone. A bento grid makes prioritization structural. The hero cell — large, unbordered, carrying the screenshot — is read first because it is biggest, and no copy needs to shout. The small cells then function as footnotes with texture: one number, one voice, one integration list, each a single idea. That asymmetry is also what makes mixed media coherent in a way a uniform grid cannot manage — a screenshot, a live chart, a dark stat tile, and a quote have completely different densities, and equal-sized cells turn that into visual chaos, while varied spans give each medium the footprint its content actually needs. The discipline runs in both directions: a bento grid with five hero cells is a uniform grid that spent its budget badly, and one with no clear hero has rearranged its equality rather than fixed it. Choose the one cell that tells the story first; everything else is supporting evidence.

4 Vorlagen

Bento Grid-Vorlagen, die Sie generieren können

Jede Vorlage ist ein echter Prompt, kein Screenshot. Kopieren Sie ihn in einen KI-Editor oder führen Sie ihn in MeDo aus und erhalten Sie React- und Tailwind-Code zurück.

LandingProduct Story

Screenshot Hero Bento

The canonical layout: a 2x2 screenshot hero, a chart cell, a stat, a quote, and a logo list — one viewport that tells the whole product story.

Create a bento grid for a SaaS landing page on a 4-column by 2-row desktop grid. Hero cell spans 2 columns and 2 rows, top-left: a 20px semibold headline, a one-line description, and a product screenshot with a soft shadow on a zinc-50-to-white gradient, no border. Right of it, a 1x2 tall cell with an upward-trending chart. Bottom row: a 1x1 stat cell ("14k+ designers") in white text on zinc-950, a 1x1 quote cell with two italic sentences and a 24px initials avatar, and a 1x1 integration cell with five grey logos. All non-hero cells: rounded-2xl, 1px zinc-200 border, 24px padding, one idea each. Tablet: 2 columns with the hero spanning both; mobile: single column ordered hero, chart, stat, quote, logos. No cell combines two content types.

In MeDo testen

AI ProductAI Dark Bento

Dark Keynote-Density Grid

The developer-tool keynote look: near-black canvas, a model-demo hero cell, and benchmark, latency, and adoption tiles packed around it at high information density.

Create a dark bento grid section for an AI product landing page: zinc-950 section background, 3-column by 2-row desktop grid with 12px gaps — tighter than a standard bento, keynote density. Hero cell spans 2x2: a live-looking model response demo, terminal-style, in monospace with a thin zinc-800 chrome and a blinking cursor animation (disabled under prefers-reduced-motion). Remaining cells: "p95 latency 340ms" in white on a zinc-900 tile with the number at 32px semibold; a benchmark cell with three horizontal comparison bars in emerald-400 versus zinc-700 baselines; a "2.1M prompts/day" adoption tile; and a 1x2 tall cell with a three-line code snippet for the API. All tiles rounded-xl with 1px zinc-800 borders, 20px padding, no gradients. Mobile: single column, hero first, then benchmark, latency, snippet, adoption.

In MeDo testen

LaunchLaunch Changelog

Launch-Day Feature Bento

For a release announcement: the flagship feature owns the hero cell in motion, and every other shipped item is reduced to one tile with one line.

Create a bento grid announcing a product launch, 3-column by 3-row desktop grid with a header row above it: a 40px bold line "What shipped today" and a one-sentence subheading. Hero cell spans 2 columns and 2 rows: the flagship feature shown as an animated product capture with a play control, headline above it in 20px semibold. Six 1x1 cells, one shipped item each: a version number, a small before/after comparison, a single stat ("3x faster exports"), a one-line new integration, a one-line mobile note, and a link tile reading "Read the full changelog" with an arrow. All 1x1 cells: rounded-2xl, 1px zinc-200 border, 20px padding, title in 15px semibold plus one 13px zinc-500 line maximum. Mobile: hero first, then link tile, then remaining cells; tablet: 2 columns with the hero spanning both.

In MeDo testen

CreativePortfolio Mosaic

Work-Sample Bento for a Studio

A visually-led bento where full-bleed work samples in varied sizes are themselves the argument — the layout demonstrates the compositional judgment the studio sells.

Create a bento grid for a design studio homepage, 4-column by 3-row desktop grid with 16px gaps and no cell borders — images bleed to rounded-2xl edges. Two large work-sample cells (one spanning 2x2, one 2x1) carry the strongest portfolio pieces as full-bleed images with a bottom-left gradient scrim and a 15px white project-name overlay. Three 1x1 cells: a work sample, a dark tile with "12 years, 140 projects" in white 28px semibold, and a client-logos tile in grey. One 1x2 tall cell holds a two-line studio philosophy quote in 18px light serif. Cells keep a consistent corner radius and gap; variety comes only from span and media. On hover, work-sample cells scale their image 1.03 over 300ms with the overlay dimming slightly; keyboard focus reproduces the hover state. Tablet: 2 columns; mobile: single column ordered largest-sample, philosophy, stat, remaining samples, logos.

In MeDo testen

So passen Sie Ihre Bento Grid an

Decide the hero cell before anything else

Pick the single cell that carries the product story — usually the screenshot of the core workflow — and give it the dominant span. If you cannot name the hero cell, you have a feature list, not a bento grid, and the layout will read as scattered regardless of spans.

One idea per cell, one medium per idea

A cell holds a stat, or a quote, or a logo row — never a stat and a quote stacked. Mixed media works across cells, not within them. The moment a cell needs a subheading to organize itself, split it into two.

Use span grammar, not magic numbers

Ask for explicit col-span and row-span per cell plus defined reflow behavior at tablet and mobile, rather than hoping the grid balances itself. Say which cells survive the collapse and in what order — the mobile stack is a new layout, not a shrunken one.

Differentiate the hero cell visually, not just in size

The hero cell should drop the border the other cells share and carry a gradient or image background instead. Size alone declares importance quietly; size plus the absence of the shared chrome declares it unmistakably.

Wer die Bento Grid-Komponente nutzt

SaaS landing page feature showcase

A screenshot-carrying hero cell flanked by a stat, a quote, and a logo list — the whole product story compressed into one viewport-height section below the fold.

Product launch page

A launch-day bento where the hero cell shows the new flagship feature in motion and the small cells enumerate the rest of the changelog, each reduced to one tile.

AI product landing page

A dark-themed bento with a model-output demo in the hero cell and benchmark numbers, latency stats, and a customer quote in the surrounding tiles — the density keynote format AI startups favor.

Design tool or portfolio homepage

A visually-led bento mixing full-bleed work samples, a client logo cell, and an availability stat, where the asymmetric sizing itself demonstrates compositional skill.

Bento Grid-Muster für verschiedene Websites

Dieselbe bento grid-Komponente, abgestimmt auf die Art der Website, auf der sie läuft.

01 / 04

SaaS Landing Pages

The post-fold story section: screenshot hero cell plus stat, quote, and integration tiles, compressing what used to be three scrolling sections into one asymmetric viewport.

Bento Grid-Stile und -Varianten

Wählen Sie die Variante, die zum Rest der Seite passt, und generieren Sie sie.

01 / 04

Light Borderless Hero

White page, hairline-bordered small cells, and a borderless gradient hero cell that drops the shared chrome. The quietest hierarchy — importance declared by size and the absence of a border.

Bento Grid in React, Next.js, Vue und Svelte

React, Next.js, Vue 3, SvelteKit, Astro oder reines HTML — dieselbe bento grid, sechs Wege zur Einbindung.

01 / 03

React Bento Grid

Each cell carries its own span classes as data, so the layout is one array and a map — reordering the story means reordering objects, not restructuring markup.

src/components/BentoGrid.tsx

const cells = [
  { id: 'hero',    span: 'col-span-2 row-span-2', content: <HeroShot /> },
  { id: 'chart',   span: 'row-span-2',            content: <TrendChart /> },
  { id: 'stat',    span: '',                      content: <StatTile value="14k+" label="designers" /> },
  { id: 'quote',   span: '',                      content: <QuoteTile /> },
  { id: 'logos',   span: '',                      content: <LogoRow /> },
]

export function BentoGrid() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2
                    lg:grid-cols-4 lg:grid-rows-2">
      {cells.map((c) => (
        <div key={c.id}
             className={`rounded-2xl border border-zinc-200 p-6
                          lg:${c.span || 'col-span-1'}`}>
          {c.content}
        </div>
      ))}
    </div>
  )
}

So fügen Sie Ihre Bento Grid einem Projekt hinzu

Vier Schritte, von der Auswahl einer bento grid-Vorlage bis zum Einsatz in der Produktion.

01~30min

Name the Hero Cell First

Write down the one thing a visitor must understand about your product — usually the core workflow on screen. If you cannot name it, resolve that before generating; the entire bento layout hangs on this decision and every span follows from it.

02~1hr

Write the Supporting Cells as Single Ideas

List four to six supporting facts, each reduced to one medium: one stat with its number, one quote with its author, one logo row. Cut anything that needs two media or a subheading — those are sections, not cells.

03~3min

Generate in MeDo

Describe the desktop grid shape, each cell's span and content, and the tablet and mobile stacking order explicitly. MeDo returns the layout as React + Tailwind; refine by conversation — "taller quote cell", "dark stat tile", "swap logos for a second stat" — until the hierarchy reads at a glance.

04~10min

Squint Test at Three Widths and Ship

Blur your eyes at desktop: does your gaze land on the hero cell first without reading anything? Then check the tablet reflow keeps the hero dominant and the mobile stack leads with it. Adjust spans until the squint test passes, then publish.

Häufige Fragen zu Bento Grid

Is a bento grid just a feature grid with uneven cells?

The difference is intent, not geometry. A feature grid is a parallel list: N features, equal cards, no implied ranking — the right choice when the visitor is meant to compare. A bento grid is a hierarchy: one cell is the story, the rest are evidence, and the area distribution is doing the prioritizing that a uniform grid leaves to the headline. If your six features genuinely are equal in importance, keep the uniform grid; forcing them into a bento just means lying about a ranking you do not have. The bento earns its asymmetry when one thing genuinely leads.

How many cells should a bento grid have?

Five to seven cells with exactly one hero. Below five, the asymmetry has nothing to play against and a simple two-column layout would do; above seven, the small cells shrink toward illegibility and the grid starts reading as a dashboard. The ratio matters as much as the count — if the hero cell is not visibly larger than the next-largest cell, you have built a mosaic, and the visitor's eye will not know where to start.

Can I mix screenshots, stats, and quotes in one bento grid?

That mixing is the format's core advantage — but mix across cells, never within one. Each medium has a natural density: a screenshot wants area, a stat wants a dark tile with generous whitespace, a quote wants reading width. Equal-sized cells fight these different needs; asymmetric spans satisfy them. Keep each cell to one medium and one idea, and let the bento's varied cell sizes absorb the differences that would look chaotic in a uniform grid.

How does a bento grid behave on mobile?

As a new layout, not a shrunken one. Every span collapses to full width in a single column, so the design decision is the stacking order: the hero cell first, then small cells in descending importance — the desktop geometry cannot decide this for you. Ask for the order explicitly in your prompt rather than accepting DOM order by default, and consider dropping the weakest cell entirely on mobile; a five-cell stack is already a long scroll, and a footnote-tier tile earns its place even less when it costs a full screen-width row.

Where did the bento grid trend come from, and is it dated?

The name comes from the Japanese bento box — compartmentalized, each item in its place — and the modern wave traces to Apple's keynote and product-page density, then to Linear, Vercel, and a generation of developer-tool sites. Like any recognizable pattern it signals a moment, but the underlying mechanism is timeless: encoding importance in area is how editorial design has always worked. What dates quickly is the styling — pastel gradients and glassy borders — not the structure. Ask for a bento in your own palette with restrained chrome and the layout outlives the trend.

How do I generate a bento grid with AI?

Describe the grid as a story with a protagonist: name the hero cell and what it contains, then list the supporting cells with their single idea each — one stat, one quote, one logo row — and the span you imagine for each. Specify the desktop grid shape (for example 4 columns by 2 rows) and the tablet and mobile reflow explicitly, since that is the part generators most often leave vague. MeDo returns the layout as React + Tailwind with per-cell spans, and you refine by conversation: "make the quote cell taller", "swap the logo cell for a second stat", "give the hero cell the dark background".

Erstelle deine bento grid jetzt.

Probiere jeden Prompt – kostenlos, keine Anmeldung erforderlich.

Kostenlos mit dem Bauen beginnen Preise ansehen

Feature Grid

Beschreiben Sie Ihre Produktvorteile in einfachem Deutsch und MeDo erstellt in Sekunden ein ausgefeiltes, responsives Feature-Grid. Icons austauschen, Spalten anpassen und Texte verfeinern — alles ohne eine Zeile Code.

Verwandte Komponenten

Card

Beschreiben Sie, was die Card enthält, und MeDo generiert den vollständigen Container — Media-, Header-, Body- und Footer-Slots, Hover-Elevation, per aspect-ratio fixierte Bilder, gleiche Höhen im Grid und einen passenden Skeleton-Zustand.

Verwandte Komponenten

Stats Section

Name your numbers and what each one proves, and MeDo generates a metrics band — count-up animation that pauses for reduced-motion users, tabular figures that do not jitter mid-count, and a layout with room for the context line that turns a big number into a believable one.

Verwandte Komponenten

Erfahrungsberichte

Beschreiben Sie den Social-Proof-Bereich, den Sie benötigen — Zitatstil, Sternebewertungen, Avatar-Layout, Raster oder Karussell — und MeDo generiert produktionsreifen Code in Sekunden. Lassen Sie Ihre Kunden für Sie werben.

Verwandte Komponenten