Bento Grid Design: Das UI-Layout-Handbuch 2026

Die dreispaltige Feature-Zeile ist tot. Seit zwei Jahren ist sie überholt, und die meisten Designer haben den Hauptteil immer noch nicht angepasst.

Sie kennen sie sicher: Drei gleich große Spalten, jede mit einem Symbol, einer Überschrift und einem Absatz, auf Mobilgeräten übereinander angeordnet. Jede SaaS-Website, die zwischen 2018 und 2023 erstellt wurde, hatte diese Struktur. Sie verkaufte eine Lüge: dass Ihr Produkt aus drei Funktionen bestünde, von denen jede genau 33 % der Aufmerksamkeit wert sei. Aufmerksamkeit war noch nie gleichmäßig verteilt, und Leser hörten auf, diese Abschnitte zu lesen, als TikTok ihnen beibrachte, dass Dichte ein Vorteil und kein Nachteil ist.

Das Bento-Grid hat sich durchgesetzt, weil es zugibt, was die Feature-Zeile nie getan hat: Manche Dinge sind größer als andere, und der Leser sollte das auf einen Blick erkennen. Für das tieferliegende Muster siehe visuelle Hierarchie. Die Mac-Seiten von Apple sind das beste Beispiel dafür, wie das in der Praxis aussieht.

Was ein Bento-Grid ist

Ein Bento-Gitter ist ein Layoutmuster, bei dem ein Abschnitt in ungleich große rechteckige Zellen unterteilt ist. Jede Zelle enthält einen bestimmten Inhalt, sodass das gesamte Grid als einheitliche Komposition wirkt.

Der Name stammt von der japanischen Bento-Box. Fächer unterschiedlicher Größe, die jeweils etwas anderes enthalten und so angeordnet sind, dass sie als Ganzes ein visuelles Gleichgewicht bilden. Keine Reihe identischer Spalten. Keine Aneinanderreihung von Erzählabschnitten. Eine einzige Komposition mit bewusster interner Hierarchie.

Das Muster hat drei wesentliche Merkmale. Erstens: ungleich große Zellen, üblicherweise in einem 3- oder 4-spaltigen Raster, wobei sich einige Zellen über mehrere Spalten oder Zeilen erstrecken. Zweitens: Unterschiedliche Inhalte pro Zelle (z. B. ein Diagramm in einer Zelle, eine Illustration in einer anderen, eine Kennzahl in einer dritten, ein Erfahrungsbericht in einer vierten). Drittens: Visuelle Kohärenz im gesamten Grid, üblicherweise durch einheitliche Hintergrundgestaltung, konsistente Eckenradien und eine zurückhaltende Farbgebung.

Was es nicht ist: eine CSS Grid-Demo. Ein Masonry-Layout. Ein Pinterest-Feed. Eine zufällige Kartenanordnung. Bento ist Komposition, nicht Algorithmus.

Ein Bento-Grid ist Komprimierung. Eine Feature-Zeile ist Erzählung. Die meisten Produkte brauchen Komprimierung.

Warum es die Feature-Zeile ersetzt hat

Drei Gründe. Zwei davon liegen auf der Hand. Der dritte ist der Grund, warum sich das Muster durchgesetzt hat.

Grund eins: Verweildauer. Interne Tests von Apple auf Marketingseiten zeigten, dass Besucher in Bento-Abschnitten etwa 47 % länger verweilten als in vergleichbaren Feature-Zeilen. Der Grund ist kein Geheimnis: Ein Leser kann ein Bento-Grid überfliegen. Es gibt keine festgelegte Lesereihenfolge. Er landet, wählt das Feld aus, das ihn interessiert, und bleibt.

Grund zwei: Dichte ohne Textwände. Ein gut gestaltetes Bento-Grid vermittelt sechs bis acht Informationen auf dem Raum, den ein traditionelles Layout für drei Informationen benötigt. Da die Zellen unterschiedliche Inhaltstypen (visuell, statistisch, Text, Erfahrungsberichte) enthalten, empfindet der Leser die Dichte nicht als erdrückend.

Dritter Grund (der eigentliche): Es entspricht dem tatsächlichen Vertrieb moderner Produkte. Die meisten SaaS-Produkte im Jahr 2026 bestehen nicht aus drei Funktionen. Sie sind Plattformen mit einer Kernfunktion, drei bis fünf unterstützenden Funktionen, einer Integrationsgeschichte, einem Proof-of-Practice und möglicherweise einer spezifischen Funktion, die gesondert hervorgehoben werden sollte. Diese Struktur passt nicht in eine dreispaltige Zeile, sondern eher in ein Bento-Board. Das Layout passte optimal zum Inhalt.

| Muster | Passt zu dieser Geschichte | Passt nicht zu dieser Geschichte |

---------|-----------------|------------------|

| Dreispaltige Funktionszeile | Drei gleichwertige Funktionen, narratives Produkt | Plattformen mit ungleicher Gewichtung der Funktionen |

| Funktionsstapel (Zeilen in voller Breite) | Ausführliche Funktionserklärungen | Bedarf an einer umfassenden Darstellung auf einen Blick |

| Bento-Grid | Plattformen, Suiten, Dashboards, Proof-of-Practice-Seiten | Linear Tutorials, Schritt-für-Schritt-Anleitungen |

Die drei besten praktischen Beispiele

Apple (apple.com/mac). Bereits oben gezeigt. Jede Mac-Produktseite ab Ende 2022 verwendet Bento. Die Abschnitte zu den M-Serie-Chips zeichnen sich durch ein besonders klares Design aus: eine dominante Zelle für die Chip-Grafik, kleinere Zellen für Benchmarks und Anwendungsfälle. Gemeinsamer dunkler Hintergrund, einheitlicher Eckenradius, konsistenter Innenabstand. Der Chip steht immer im Vordergrund. Dies ist eine redaktionelle Entscheidung, nicht das Raster.

Linear (linear.app/features). Bento für Entwicklertools. Die Feature-Seite besteht aus vierspaltigen Bento-Elementen. Die Hauptfunktion (Problemverfolgung, Planung, Entwicklung) belegt eine 2x2-Zelle, kleinere Funktionen eine 1x1- oder 1x2-Zelle. Die Version von Linear ist für ihre Schlichtheit bekannt: ausschließlich Produkt-Screenshots, keine Stock-Illustrationen, Monospace-Schrift. Sie wirkt bewusst wie ein Datenblatt.

Vercel (vercel.com). Das Homepage-Bento von Vercel ist die Hybridversion. Einige Zellen enthalten Illustrationen, andere Produkt-Screenshots, wieder andere reinen Text. Sie beweisen, dass man verschiedene Medien in einem einzigen Bento mischen kann, ohne dass es inkonsistent wirkt, vorausgesetzt, alle Zellen verwenden dieselbe visuelle Sprache (gleicher Hintergrund, gleicher Radius, gleicher Innenabstand).

Drei verschiedene Branchen, drei verschiedene Töne, dasselbe zugrunde liegende Muster. Das Muster ist nicht modisch. Es ist ein Layout für ein spezifisches Kommunikationsproblem: „Wir bieten viele Produkte an, hier sind sie auf einen Blick. Suchen Sie sich das aus, was Sie interessiert.“

Die Raster-Mathematik (einfacher als gedacht)

Die meisten Bento-Raster basieren auf einer von zwei Grundstrukturen.

Das 3-spaltige Bento. Ideal für kurze Abschnitte, Testimonials und Produkt-Highlights. Typisches Muster:

• Eine 2x1-Hero-Zelle (erstreckt sich über 2 Spalten und 1 Zeile)

• Eine 1x1-Zelle (1 Spalte, 1 Zeile)

• Zwei 1x1-Zellen in einer zweiten Zeile

• Eine 1x2-Zelle für Inhalte, die von der vertikalen Anordnung profitieren

Das 4-spaltige Bento. Besser geeignet für umfangreichere Abschnitte mit mehr Breite. Typisches Muster:

• Eine 2x2-Hauptzelle
• Zwei 1x1-Zellen daneben
• Eine 2x1-Zelle am unteren Rand
• Eine 1x1-Zelle zum Abschließen der Zeile

Sie können ein Bento-Grid in CSS Grid mit etwa zwanzig Zeilen erstellen:

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}
.bento-cell-hero { grid-column: span 2; grid-row: span 2; }
.bento-cell-wide { grid-column: span 2; }
.bento-cell-tall { grid-row: span 2; }
.bento-cell-default { grid-column: span 1; grid-row: span 1; }

Weisen Sie die Klassen den untergeordneten Elementen zu, und das Grid organisiert sich von selbst. So einfach ist das. Die Schwierigkeit bei Bento liegt nicht im Grid selbst, sondern in der redaktionellen Entscheidung, welche Zellen Gewicht erhalten sollen.

Responsive Regeln, die funktionieren

Desktop-Bento ist einfach. Mobile-Bento ist die Herausforderung für die meisten Implementierungen.

Der Fehler: Die Grid-Form beibehalten und alles verkleinern. Bei einer Breite von 390px werden aus einem 4-spaltigen Bento vier 90px breite Spalten – nutzlos. Die Zellen können keinen sinnvollen Inhalt aufnehmen.

Die Regel: Umfließen, nicht verkleinern. Auf Mobilgeräten wird das Bento-Grid auf eine einzelne Spalte reduziert, die Zellenreihenfolge ändert sich jedoch, um die Hierarchie beizubehalten.

• Die Hero-Zelle rückt nach oben (größte visuelle Wirkung zuerst auf Mobilgeräten).

• 2x1 breite Zellen werden zu einspaltigen Zellen in voller Breite.

• 1x2 hohe Zellen werden zu Zellen in Standardhöhe und nicht vertikal gestreckt.

• Die Reihenfolge wird anhand der Wichtigkeit und nicht anhand der visuellen Position auf Desktop-Geräten neu festgelegt.

CSS Grid vereinfacht dies mit grid-template-areas und Media Queries. Alternativ können Sie in Tailwind lg:-Präfixe verwenden, um Bento-Spans nur auf großen Bildschirmen anzuwenden und die Standard-Mobil-Stack-Verwaltung dem Nutzer zu überlassen.

| Breakpoint | Grid-Verhalten |

|------------|---------------|

| Desktop (1280px+) | Vollständiges Bento, 4-spaltig mit variablen Spans |

Tablet (768–1279px) | Vereinfachtes Bento-Layout, 2-spaltig mit einigen Spans |

| Mobilgeräte (unter 768px) | Einspaltig, nach Inhaltspriorität sortiert |

Der Test: Bei 390px muss jede Zelle hoch genug sein, damit der Inhalt ohne Zoomen oder horizontales Scrollen lesbar ist. Ist dies nicht der Fall, liegt das Problem an der Zelle, nicht am Viewport.

Weitere Layout-Beispiele finden Sie unter Brainy Papiere. Benötigen Sie ein Landingpage, das verhindert, dass Besucher durch zu viele Feature-Zeilen verloren gehen? Dann Brainy einstellen – wir liefern Ihnen echte Layouts, echte Texte und echte Conversion-Raten.

Wann ein Bento-Grid nicht die richtige Wahl ist

Bento ist keine Universallösung. Bei falscher Anwendung wird der Inhalt in Zellen gezwängt, die eigentlich Platz bräuchten.

Bento ist ungeeignet, wenn:

• Ihr Inhalt ist sequenziell aufgebaut. Eine Schritt-für-Schritt-Anleitung, ein Onboarding-Prozess, eine narrative Fallstudie – diese benötigen eine lineare Reihenfolge. Bento zerstört diese Lesereihenfolge.

• Alle Elemente sind gleichwertig. Wenn Sie tatsächlich drei gleichwertige Features haben, ist eine dreispaltige Zeile weiterhin korrekt. Bento erfordert eine interne Hierarchie. Die Darstellung gleichwertiger Elemente in Bento-Zellen lässt diese willkürlich erscheinen.

• Jede Zelle braucht Tiefe. Benötigt Ihr Feature 200 Wörter zur Erklärung, passt es nicht in eine Bento-Zelle. Schreiben Sie es als Abschnitt, nicht als separates Fach.

• Sie haben keine aussagekräftigen visuellen Elemente. Bento-Tabellen sind am besten lesbar, wenn die Zellen visuelle Elemente (Diagramme, Produktfotos, Illustrationen) enthalten. Reine Text-Bentos wirken wie überfüllte Zeitungsseiten.

Entscheidungstabelle:

| Ihr Inhalt ist... | Verwenden |

|--------------------|-----|

| Eine Plattform mit ungleicher Gewichtung der Funktionen | Bento-Grid |

Drei gleichwertige, parallele Funktionen | Dreispaltige Zeile |

Eine erläuternde Textsequenz | Funktionsübersicht (Zeilen in voller Breite) |

Schritt-für-Schritt-Anleitung | Nummerierte Abschnitte |

Eine Dashboard-ähnliche Proof-Seite | Bento-Grid |

Detaillierte Beschreibung einer Funktion | Hero-Element + unterstützende Abschnitte |

Das Starter-Muster für Designer

Verwenden Sie dies als Basis. Bearbeiten Sie es von hier aus, erstellen Sie es nicht von Grund auf neu.

Abschnittsstruktur:

1. Überschrift in voller Breite über dem Grid (einzeilig, prägnant)
2. 4-spaltiges Grid, insgesamt 3 bis 5 Zeilen
3. Eine Hero-Zelle (2x2), visuell stärkstes Element
4. Vier bis sechs unterstützende Zellen mit unterschiedlichen Inhaltstypen
5. Optionale abschließende Zelle in voller Breite für Call-to-Action oder Proof

Regeln für den Zelleninhalt:

• Maximal ein Satz pro Zelle. Wenn Sie einen Absatz benötigen, ist die Zelle zu klein.

• Ein Element pro Zelle (Diagramm, Illustration, Screenshot, Kennzahl, Kundenstimme, Logo).

• Einheitlicher Innenabstand (üblicherweise 24–32 px).

• Einheitlicher Eckenradius (üblicherweise 12–16 px).

• Zurückhaltende Farbwahl. Die meisten Zellen haben denselben Hintergrund. Ein oder zwei Zellen können invertiert oder mit Akzentfarben versehen werden.

Reihenfolge für Mobilgeräte: Zuerst die Hauptzelle, dann die drei wichtigsten unterstützenden Zellen, dann die restlichen Zellen.

Veröffentlichen Sie einen Bento-Abschnitt auf Ihrer nächsten Landingpage. Sie werden den Unterschied bemerken.

FAQ

Ist das Bento-Grid nur ein Trend?

Nein. Trends halten ein bis zwei Jahre. Bento-Grids sind seit 2022 auf wichtigen Produktseiten weit verbreitet und nach wie vor beliebt. Sie stellen ein Layoutmuster für ein spezifisches Kommunikationsproblem dar, und dieses Problem wird auch weiterhin bestehen.

Kann ich ein Bento-Grid auf einem Blog oder einer Content-Website verwenden?

Selten. Bento-Grids eignen sich für Produkt- und Marketing-Oberflächen. Blogbeiträge sind sequenziell. Ein Artikel-Hub oder eine Übersicht mit hervorgehobenen Inhalten kann ungleich große Zellen im Bento-Stil verwenden, der vollständige Artikeltext jedoch nicht.

Was ist der Unterschied zwischen einem Bento-Grid und einem Masonry-Layout?

Masonry ist algorithmisch. Die Zellen werden automatisch anhand der Inhaltshöhe platziert. Bento hingegen ist kompositorisch. Die Zellen werden vom Designer bewusst nach Wichtigkeit angeordnet. Masonry eignet sich für Pinterest. Bento eignet sich für Produkte.

Eignen sich Bento-Grids für Dashboards?

Ja, wenn das Dashboard eine ungleiche Gewichtung der Widgets aufweist. Eine primäre Kennzahl, mehrere sekundäre Kennzahlen, ein Diagramm, ein Protokoll, ein Aktivitätsfeed – genau das entspricht der Bento-Struktur. Siehe: Projektansicht von Linear, Bereitstellungs-Dashboard von Vercel.

Wie viele Zellen sollte ein Bento-Grid haben?

Zwischen vier und acht. Bei weniger als vier Zellen wirkt es nicht mehr wie ein Raster. Bei mehr als acht Zellen wirkt es wie eine Wand. Sieben ist ein bewährter Wert.

Schluss mit Feature-Zeilen

Betrachten Sie eine beliebige SaaS-Website der letzten drei Jahre. Zählen Sie die dreispaltigen Feature-Zeilen. Zählen Sie die Bento-Abschnitte. Die Zahlen ändern sich jedes Jahr.

Das hat seinen Grund. Die Feature-Zeile war ein Layout für eine Geschichte, die wir nicht mehr erzählen: die Geschichte der „drei gleichwertigen Funktionen“. Moderne Produkte haben keine drei gleichwertigen Funktionen. Sie bestehen aus einer Plattform, einer Hauptfunktion, einer Reihe unterstützender Funktionen, einem Beweis und einem abschließenden Call-to-Action. Diese Struktur passt zu einem Bento. Sie passt nicht zu einer Zeile.

Wählen Sie eine Seite Ihrer aktuellen Website, die noch eine Feature-Zeile enthält. Gestalten Sie diesen Abschnitt als Bento-Raster um. Platzieren Sie die stärkste Funktion in der Hauptzelle. Platzieren Sie den Beweis in einer unterstützenden Zelle. Platzieren Sie das Alleinstellungsmerkmal in einer weiteren Zelle. Veröffentlichen Sie die Seite.

Beobachten Sie, wie die Verweildauer steigt. Beobachten Sie, wie die Absprungrate sinkt. Beobachten Sie, wie die Seite tatsächlich funktioniert.

Schluss mit Feature-Zeilen!