Bento-Grid-Design: Ein Leitfaden für 2026 zu Layouts, Abständen und wann man sie nicht verwenden sollte

Ein Bento-Grid ist ein Bereich, der aus unterschiedlich großen Zellen besteht. Jede Zelle enthält einen in sich abgeschlossenen Inhalt, dessen Größe die Relevanz der einzelnen Elemente bestimmt. Die Zelle selbst wird zur Bedeutungseinheit, und das Auge erfasst die Wichtigkeit anhand der Größe, noch bevor es ein Wort liest.

Die meisten Bento-Grids im Web sind im Jahr 2026 eher dekorativ. Die Zellen haben die gleiche Größe, der Inhalt wurde nachträglich angepasst, und das Layout wirkt wie eine Kartenwand. Die guten Bento-Grids hingegen sind anders. Die Zellengröße ergibt sich aus dem Inhalt, Abstände und Polster sorgen für einen harmonischen Ablauf, und die responsive Darstellung bleibt auch auf Mobilgeräten gut lesbar. Dieser Leitfaden behandelt Anatomie, Größenlogik, Abstände, Content-Fit, Responsive Design, sieben Teardowns (Apple, Linear, Vercel, Stripe, Arc, Apple Vision Pro, Figma) und Fälle, in denen Bento-Grids die Seitendarstellung beeinträchtigen.

Bento-Grid-Design, die Arbeitsdefinition

Ein Bento-Gitter ist eine bewusst gestaltete Komposition, bei der jede Zelle einen in sich abgeschlossenen Inhalt enthält und die Zellengröße sich aus dem Inhalt ergibt.

Drei Eigenschaften unterscheiden es von einem Kartenraster: Die Zellen haben ein festgelegtes Größenverhältnis. Die Zellen enthalten unterschiedliche Inhaltstypen und nicht dieselbe Vorlage wiederholt. Das Layout wirkt wie eine einzige Komposition. Entfernt man eine dieser drei Eigenschaften, erhält man eine Kartenwand.

Das Muster wurde populär, weil es ein reales Problem löste. Die Feature-Reihe, bestehend aus drei oder vier Spalten mit identischen Symbol-Überschriften-Absatzkarten, galt bis 2023 als das am wenigsten ansprechende Layout im Web. Bento bot Designern die Möglichkeit, mehrere Features zu präsentieren, ohne dass der Abschnitt selbst wie eine Standardvorlage wirkte.

Der Aufbau eines Bento-Grids

Jedes Bento-Layout besteht aus vier Elementen: der Ankerzelle, den Stützzellen, dem Spaltenabstand und dem umgebenden Rand. Stimmt nur eines davon nicht, bricht das Grid zusammen.

Die Ankerzelle ist die größte, meist links oder oben links platziert und enthält den wichtigsten Inhalt. Sie erscheint zuerst und rahmt den Rest ein. Ein Bento ohne klaren Anker wirkt wie eine flache Kartenreihe. Die Stützzellen ergänzen den Inhalt und rücken den Anker beim ersten Blick in den Vordergrund. Der Spaltenabstand dient der Strukturierung und signalisiert dem Auge, dass es sich um separate Zellen einer Komposition handelt. Der umgebende Rand bildet den Rahmen, der den Abschnitt als eigenständige Einheit wahrnehmbar macht.

Der Anker legt die Priorität fest. Die Stützzellen liefern die Details. Der Zeilenabstand trennt die einzelnen Elemente, ohne die Komposition zu stören. Der umgebende Rand rahmt das Ganze ein.

Zellengröße richtet sich nach dem Inhalt, nicht nach der Dekoration

Der größte Fehler von Teams ist, Zellen so zu skalieren, dass sie die Arbeitsfläche ausfüllen, anstatt sie an ihren Inhalt anzupassen.

Eine Zelle mit einer einzelnen Zahl und einer einzeiligen Bildunterschrift muss nicht die gleiche Größe haben wie eine mit einem Screenshot und drei Sätzen. Werden sie zwanghaft gleich groß, wirkt die eine leer, die andere beengt. Das Raster dient der Dekoration, nicht der Kommunikation.

Drehen Sie die Reihenfolge um. Legen Sie fest, welcher Inhalt in den Abschnitt gehört, wählen Sie den Anker, dann die weiteren Elemente und skalieren Sie anschließend jede Zelle so, dass der Inhalt mit ausreichend Freiraum hineinpasst. Jede Zelle sollte etwa 20 bis 30 Prozent Innenabstand haben. Weniger wirkt überladen, mehr leer.

Die übersichtlichsten Raster verwenden Seitenverhältnisse. Der Anker ist etwa doppelt so groß wie die größte unterstützende Zelle. Dieses Verhältnis entspricht dem von visuelle Hierarchie verwendeten, komprimiert im Abschnitt.

Die Ankerzelle lenkt den Lesefluss

Jedes Bento-Layout hat einen Anker, und die meisten schwachen Raster legen sich nicht auf einen fest. Der Anker ist deutlich größer – idealerweise doppelt so groß wie die nächste Zelle – und bietet die höchste Inhaltsdichte. Im Anker befindet sich der aussagekräftigste Text, das wichtigste visuelle Element oder die wichtigste Interaktion. Wenn der Anker eine generische Illustration ist, während die eigentliche Überschrift in einer unterstützenden Zelle steht, wird der Lesefluss unterbrochen.

Die Mac-Produktseite von Apple verwendet einen Anker mit einem prägnanten Produktfoto und einer markanten Überschrift. Linear geht auf der Feature-Seite den umgekehrten Weg: ein textlastiger Anker mit einer prägnanten Überschrift und einem UI-Element, die unterstützenden Zellen sind weniger dicht. Gleiches Prinzip, andere Inhaltsstruktur.

Der Fehler: zwei Anker. Designer teilen die Seite in ein linkes und ein rechtes Panel gleicher Größe auf und nennen das Ganze Bento. Das ist ein zweispaltiger Hero-Bereich. Sobald zwei Abschnitte gleichberechtigte Leser ansprechen, funktioniert das Bento-Layout nicht mehr.

Abstandsregeln, die ein Zusammenfallen des Rasters verhindern

Bento-Raster scheitern häufiger an den Abständen als an der Größe, da Spaltenabstand und Innenabstand zwei unterschiedliche Funktionen haben, die die meisten Teams jedoch verwechseln.

Der Spaltenabstand signalisiert dem Auge, wo eine Zelle endet und die nächste beginnt. Ist er zu eng, wirkt der Inhalt wie ein Block. Ist er zu groß, wirkt er unzusammenhängend. Verwenden Sie einen Spaltenabstand von etwa der Hälfte des Innenabstands. Der Innenabstand gibt dem Auge vor, wie viel Platz der Inhalt hat. Der umgebende Rand bildet die dritte Dimension: vertikaler Freiraum von mindestens dem 1,5-Fachen des Spaltenabstands, damit der Abschnitt als eigenständige Einheit wahrgenommen wird.

Ein häufiger Fehler: Teams verwenden für alle drei Werte denselben Wert. Das Raster verliert dadurch seinen Rhythmus. Eine leichte Differenzierung der drei Werte stellt ihn wieder her.

Regeln für die Inhaltsanpassung: Was gehört in eine Zelle?

Eine Bento-Zelle ist nur so gut wie die Inhaltseinheit, die sie enthält. Die meisten Zellen scheitern, weil der Inhalt in die Zelle hineingezwängt wurde, anstatt die Zelle um den Inhalt herum zu gestalten.

Eine Bento-Zelle ist ein Container für eine einzige Idee: eine Aussage, ein Feature, eine Zahl, ein Screenshot, eine Kundenmeinung. Guter Inhalt: ein einzelnes Feature mit einer einzeiligen Überschrift und einer UI-Vorschau, eine einzelne Kennzahl mit Bildunterschrift, eine einzelne Kundenmeinung mit Quellenangabe. Schlechter Inhalt: ein langer Absatz, ein spaltenübergreifender Vergleich, ein mehrstufiger Prozess, eine Preistabelle mit ausgerichteten Zeilen.

Die Entscheidungsregel: Wenn der Inhalt innerhalb der Zelle herausgenommen und an beliebiger Stelle in einen Absatz eingefügt werden kann, ohne an Bedeutung zu verlieren, erfüllt die Zelle ihren Zweck. Benötigt sie Kontext, fragmentiert das Bento ihn.

Responsives Verhalten – der wahre Test

Ein Bento, das bei 1440 Pixeln gut aussieht, aber bei 768 Pixeln fehlerhaft dargestellt wird, ist eher ein Desktop-Poster als ein Layout. Das responsive Zusammenklappen ist der Punkt, an dem die meisten produktiven Raster stillschweigend scheitern.

Die Herausforderung besteht darin, dass Zellen nicht einheitlich sind. Eine Feature-Zeile lässt sich sauber zusammenklappen. Ein Bento-Layout muss entscheiden, wie mit Zellen unterschiedlicher Breite und Höhe umgegangen werden soll. Werden die Regeln falsch angewendet, wirkt die mobile Ansicht wie ein unübersichtlicher Haufen unpassender Kästchen.

Die Vorgehensweise: Zuerst die Desktop-Ansicht definieren. Auf Tablets (768 bis 1024 Pixel) in zwei Spalten zusammenklappen, wobei der Anker beide Spalten überspannt. Auf Mobilgeräten (unter 768 Pixel) einspaltig, jede Zelle in voller Breite und gestapelt, Anker zuerst, unterstützende Zellen in der Reihenfolge ihrer Priorität. Innenabstand und Spaltenabstand an jedem Breakpoint anpassen, damit die Zellen proportional wirken und nicht nur verkleinert.

Der zu vermeidende Fehler: Zellen mit Inhalt, der bei einer Breitenänderung nicht lesbar ist. Eine horizontale Infografik in einer Desktop-Zelle wird in einer mobilen Spalte unlesbar. Inhalte für beide Formate planen, nicht nur für eines.

Sieben kommentierte Produktseiten

Das Framework ist nur dann relevant, wenn es sich im Kontext der veröffentlichten Seiten bewährt. Sieben Bento-Implementierungen sind derzeit im Produktiveinsatz. Keine ist perfekt. Alle liegen über dem Standard für SaaS-Landingpages.

Apple, Bento als Produkt-Inszenierung

Apples Produktseiten nutzen Bento als scrollbasierte Inszenierung. Ankerzellen sind riesig und zeigen oft ein einzelnes Produktfoto in nahezu voller Bildschirmgröße. Das Seitenverhältnis ist drei- bis viermal so groß wie das der unterstützenden Zellen. Großzügige Abstände. Jede Zelle enthält nur ein Produktmerkmal, nie zwei. Der Besucher verlässt die Seite, nachdem er die Inhalte in der von Apple gewünschten Reihenfolge gelesen hat. Der Nachteil: Animationen können bei langsamen Verbindungen zu Leistungseinbußen führen und die Seitenstruktur beeinträchtigen.

Linear, Bento als Entwicklerdichte

Linear verwendet eines der dichtesten Bento-Grids im Web und sorgt dank präziser Typografie und eines stets dominanten Ankers für optimale Lesbarkeit. Der Anker befindet sich links und ist doppelt so groß wie die größte unterstützende Zelle, rechts daneben befinden sich zwei Spalten mit je drei kleineren Zellen. Die Abstände sind eng, der Innenabstand großzügig. Jede Zelle präsentiert ein Feature mit einer prägnanten Überschrift und einem UI-Fragment. Die Typografie unterstreicht die Bedeutung. Eine schwächere Typografie würde das Muster stören.

Vercel, Bento als Bewegungschoreografie

Vercel nutzt Bento als Bühne für Bewegung. Jede Zelle belohnt das Scrollen mit einer kleinen Enthüllung, und das Raster erzählt die Geschichte von Entwicklung und Veröffentlichung. Ein klarer Ankerpunkt bei 1,5x mit vier bis sechs unterstützenden Zellen. Gemeinsam erzählen sie eine Geschichte über den Entwickler-Workflow. Der Nachteil: Bewegung kann Nutzer mit geringeren Bewegungspräferenzen unnötig überfordern.

Stripe, Bento als Zurückhaltung

Die Bento-Abschnitte von Stripe sind die ruhigsten der Liste, was genau der Grund dafür ist, dass sie bei einem Publikum funktionieren, das lautes Design kritisch sieht. Ankerpunkt plus zwei oder drei unterstützende Zellen. Klare, aber nicht übertriebene Proportionen. Redaktioneller Abstand. Jede Zelle präsentiert eine Aussage mit einem prägnanten Codebeispiel oder einer einzelnen Illustration. Das Muster vermittelt Selbstbewusstsein ohne Schnickschnack.

Sie wünschen sich ein Bento-Layout, das die Seite übersichtlich gestaltet, anstatt sie zu überladen? Miete Brainy. UXBrainy liefert Landingpage-Design mit Bento-Layouts, die Zelle für Zelle optimiert sind. AppBrainy entwickelt Produkt-UIs mit derselben Sorgfalt.

Arc, Bento als Ausdruck von Persönlichkeit

Arc nutzt Bento als Vehikel für die Markenpersönlichkeit. Zellen verändern Form, Farbe und Bewegung, um die Verspieltheit des Produkts zu unterstreichen. Abgerundete Ecken, Farbverläufe, unterschiedliche Höhen, flexible Proportionen. Arc bricht mit den Regeln und funktioniert, weil die Marke sich durch Positionierung die nötige Legitimität erarbeitet hat – derselbe Instinkt, der auch guten Marken zugrunde liegt: brutalistisches Webdesign – verdiente, nicht geliehene Legitimität.

Apple Vision Pro, Bento als räumliche Vorschau

Vision Pro ist das ambitionierteste Bento-Layout im Web, da es ein dreidimensionales Produkt durch zweidimensionale Zellen suggerieren muss. Ankerzellen nutzen Videos, um räumliche Tiefe zu erzeugen. Dramatische Seitenverhältnisse, filmische Abstände. Der Videoinhalt übernimmt die räumliche Darstellung, und die Zellengröße passt jeden Moment an. Es ist der stärkste Beweis dafür, dass der richtige Inhalt das Layout über die Möglichkeiten der Zellenform allein hinaus verbessern kann.

Figma, Bento als Feature-Dichte

Figma verarbeitet mehr parallele Features als jedes vergleichbare Layout und bewältigt diese Dichte, da das Typografiesystem und der Zellenrhythmus die Last tragen. Sechs oder sieben Zellen pro Abschnitt, ein klarer Anker, komprimierte Seitenverhältnisse, enge Abstände, großzügiger Innenabstand. Jede Zelle enthält ein Feature mit einem UI-Fragment und einer prägnanten Bildunterschrift. Figmas Typografiesystem ist so stark, dass es sich über viele kleine Zellen hinweg behauptet. Ein schwächeres Typisierungssystem verliert mit zunehmender Zellenzahl an Bedeutung.

Wann man kein Bento-Grid verwenden sollte

Das Bento-Grid ist das falsche Layout für Inhalte, die chronologisch gelesen, detailliert verglichen oder für eine schnelle Entscheidung überflogen werden müssen. Die meisten Seiten greifen unüberlegt darauf zurück.

Fälle, in denen das Bento-Grid die Seite beeinträchtigt:

• Längere redaktionelle Texte: Das Bento-Grid fragmentiert den Lesefluss.

• Vergleichsinhalte: Preistabellen, Funktionsvergleiche, Vorher-Nachher-Listen. Die Zellen sind nicht für das zellenübergreifende Lesen ausgerichtet.

• Schritt-für-Schritt-Anleitungen: Eine Anleitung benötigt eine klare Reihenfolge. Bento-Zellen suggerieren parallele Ideen, keine einzelnen Schritte.

• Seiten mit nur einer Entscheidung: Wenn die Seite den Besucher zu einer bestimmten Handlungsaufforderung (CTA) führen soll, verteilt das Bento-Grid den Fokus auf mehrere Zellen.

• Seiten mit wenig Inhalt: Bei nur ein oder zwei Ideen ist ein einzelnes Hero-Panel aussagekräftiger als ein Bento-Grid mit leeren Zellen.

Das Bento-Grid eignet sich für parallele Ideen ähnlicher Art, die der Besucher in beliebiger Reihenfolge überfliegen kann. Überspringen Sie diesen Schritt für Sequenz-, Vergleichs-, Entscheidungs- oder Einzelaussagenseiten.

Checkliste für die Bento-Anpassung vor der Veröffentlichung

Führen Sie diese Checkliste aus, bevor Sie ein Layout in Bento übernehmen:

1. Anker-Commit: Ist eine Zelle deutlich größer als die nächste (mindestens 1,5-mal so groß)?

2. Zelleninhaltsanpassung: Kann jede Zelle als eigenständiger Container für eine Idee dienen?

3. Sequenzielle Abhängigkeit: Muss der Besucher die Zellen der Reihe nach lesen? Falls ja, ist Bento nicht geeignet.

4. Zellenvergleich: Müssen Zellen zeilenweise verglichen werden? Falls ja, verwenden Sie eine Tabelle.

5. Innenabstand: Ist der Innenabstand etwa doppelt so groß wie der Spaltenabstand?

6. Außenabstand: Ist oben und unten mindestens das 1,5-fache des Spaltenabstands als Freiraum vorhanden?

7. Responsives Design: Hat jede Zelle die geplante Form für Desktop, Tablet und Smartphone?

8. Anker auf Mobilgeräten: Bleibt der Ankerpunkt an Ort und Stelle (erste Zelle, volle Breite)?

9. Inhaltsdichte. Etwa 20 bis 30 Prozent innerer Leerraum pro Zelle?

10. Anzahl der Abschnitte. Mehr als drei Bento-Abschnitte auf der Seite? Die Seite entwickelt sich zu einer Bento-Galerie.

Eine Seite, die diese zehn Kriterien erfüllt, hat einen Bento-Abschnitt, dessen Layout gerechtfertigt ist.

FAQ

Was ist ein Bento-Grid im Webdesign?

Ein Bento-Grid ist ein Abschnitt, der aus unterschiedlich großen Zellen besteht. Jede Zelle enthält einen in sich abgeschlossenen Inhalt, wobei die Zellgröße die Relevanz der Inhalte bestimmt. Der Name stammt von der japanischen Bento-Box, in der verschiedene Speisen unterschiedlicher Größe auf einem Tablett verpackt werden. Es wird am häufigsten für Produktmerkmale, Leistungsübersichten und Testimonials verwendet.

Wann sollte man ein Bento-Grid verwenden?

Verwenden Sie ein Bento-Grid, wenn Sie mehrere thematisch ähnliche Inhalte präsentieren, die der Besucher in beliebiger Reihenfolge erfassen kann. Es eignet sich für Produktmerkmale, Leistungsübersichten und Testimonials. Überspringen Sie diesen Abschnitt bei sequenziellem Lesen, zellenübergreifenden Vergleichen, schrittweisen Prozessen und Seiten mit nur ein oder zwei Ideen.

Wie skaliert man Zellen in einem Bento-Grid?

Skalieren Sie von den Inhalten nach innen. Wählen Sie den Anker, dann die zugehörigen Zellen und skalieren Sie jede Zelle so, dass der Inhalt mit etwa 20 bis 30 % innerem Leerraum hineinpasst. Der Anker sollte mindestens doppelt so groß sein wie die größte unterstützende Zelle.

Welcher Spaltenabstand ist für ein Bento-Grid optimal?

Verwenden Sie einen Spaltenabstand von etwa der Hälfte des inneren Abstands. Wenn Zellen beispielsweise 32 Pixel Innenabstand haben, verwenden Sie einen Spaltenabstand von 16 Pixeln. Das Verhältnis ist wichtiger als der absolute Wert.

Wie verhält sich ein Bento-Grid auf Mobilgeräten?

Es wird auf Tablets in zwei Spalten und auf Mobilgeräten in eine Spalte reduziert, wobei der Anker zuerst angezeigt wird und die unterstützenden Zellen entsprechend ihrer Priorität neu angeordnet werden. Innenabstand und Spaltenabstand skalieren sich an jedem Breakpoint, sodass die Zellen proportional wirken. Zellen mit Inhalten, die sich nicht an die Bildschirmbreite anpassen lassen, sollten für mobile Endgeräte optimiert werden.

Was ist der Unterschied zwischen einem Bento-Grid und einem Karten-Grid?

Ein Karten-Grid ist einheitlich gestaltet; alle Karten haben die gleiche Größe und den gleichen Inhaltstyp. Ein Bento hingegen ist eine bewusste Komposition, bei der die Zellen unterschiedliche Größenverhältnisse aufweisen und verschiedene Inhaltstypen enthalten. Bento impliziert Hierarchie durch die Größe, ein Karten-Grid Parallelität durch Einheitlichkeit.

Das Erfolgsrezept erfolgreicher Bento-Grids

Ein Bento-Grid, das auch 2026 noch relevant ist, besteht nicht aus einer Vielzahl cleverer Zellen. Es ist ein Grid, in dem jede Zelle eine bewusste Verdichtung einer einzigen Idee darstellt.

Die erfolgreichen Marken Apple, Linear, Stripe und Figma haben eine gemeinsame Philosophie: Zellen sind nur dann klein, wenn der Inhalt einen geringen Nutzen bringt. Zellen sind nur dann groß, wenn der Inhalt einen hohen Nutzen bringt. Der Abstand zwischen den Spalten ist gleichmäßig, die Innenabstände sind gleichmäßig, das responsive Zusammenklappen ist geplant. Nichts ist dem Zufall überlassen, denn das Bento-Layout bestraft Fehler härter als jedes andere Layout im Web.

Marken, die schlecht altern, haben das Layout als rein visuellen Stil behandelt. Sie wählten zuerst die Zellenformen und überlegten dann, welcher Inhalt hineinpassen könnte. Die Zellen enthalten schließlich Inhalte, für die sie nicht konzipiert wurden, und das responsive Zusammenklappen wird auf Mobilgeräten fragmentiert. Diese Raster werden dann im Laufe des nächsten Jahres Abschnitt für Abschnitt stillschweigend neu gestaltet.

Die richtige Vorgehensweise ist, mit dem Inhalt zu beginnen. Entscheiden Sie, was der Abschnitt vermitteln soll, wählen Sie den Anker, die Parallelen und passen Sie die Zellengröße entsprechend an. Behandeln Sie es wie einen Ihrer Kernpunkte Webdesign-Prinzipien, genauso wie Hierarchie und Typografie, und die Bento-Abschnitte, die Sie veröffentlichen, sehen auch im nächsten Jahr noch gut aus.

Wenn Sie ein Bento-Layout wünschen, das die Seite komprimiert, anstatt sie zu verschönern, Brainy einstellen. UXBrainy entwickelt Marketing-Websites und Landingpages mit Bento-Layouts, die Zelle für Zelle optimiert sind. AppBrainy liefert Produkt-UIs mit der gleichen Disziplin.