Ein Bento Layout (oft auch Bento Grid genannt) ist ein Webdesign-Layout-Prinzip, das Inhalte in einem asymmetrischen, strukturierten Raster aus Kacheln mit abgerundeten Ecken organisiert. Es ist namentlich und konzeptionell von der traditionellen japanischen Bento-Box inspiriert, bei der verschiedene Speisen in getrennten, perfekt passenden Fächern serviert werden.
Bedeutung
Das Bento Layout bietet eine hervorragende Möglichkeit, komplexe, unzusammenhängende Informationen (wie Features, Statistiken, Bilder und Links) visuell ansprechend auf engem Raum zu strukturieren. Große Tech-Marken wie Apple, Microsoft und Tailwind CSS nutzen Bento Grids auf ihren Landingpages. Aus technischer Sicht lässt sich dieses Layout optimal und responsiv mit CSS Grid umsetzen.
Funktionsweise
Ein Bento Layout basiert auf einem CSS Grid mit definierten Spalten und Zeilen (z. B. grid-template-columns: repeat(12, 1fr)). Einzelne Kacheln spannen sich über mehrere Spalten und Zeilen hinweg (grid-column: span 4; grid-row: span 2). Dadurch entsteht eine dynamische Asymmetrie. Abgerundete Ecken (border-radius), dezente Schatten (box-shadow) und Micro-Interaktionen auf Hover-Effekten sind typische Design-Merkmale dieses Stils.
Praxisbeispiel
Die Landingpage einer Digitalagentur präsentiert ihre Leistungen im Bento-Stil: Eine große Kachel zeigt das Showreel (Video), eine mittelgroße Kachel das B2B-Manifesto (Text), eine quadratische Kachel die Klickrate (Zahl) und eine kleine Kachel einen direkten CTA-Link zur Kontaktseite. Das Layout bricht auf mobilen Bildschirmen automatisch in eine vertikale, einspaltige Liste um.