Bento-Grid-Layout-System

Bento Grid Layout System

Zweck

Das Bento Grid Layout System bietet eine Methodik zur Organisation unterschiedlicher Inhalte (wie Leistungskennzahlen, visuelle Illustrationen, interaktive Widgets, Zitate und Produkt-Teaser) in einem einheitlichen, modularen Raster. Inspiriert von traditionellen japanischen Bento-Boxen etabliert es ein asymmetrisches Gleichgewicht über verschiedene Zellenhöhen und -breiten hinweg. Dieses System löst das Designproblem der visuellen Fragmentierung auf Dashboards, Landing Pages und Portfolios, indem es strenge proportionale Regeln, konsistente Innenabstände und strukturierte Typografie-Skalen durchsetzt. Es verwandelt das, was leicht zu einem chaotischen Layout werden könnte, in eine klare, scanbare und zugängliche visuelle Hierarchie.

Anwendungsfälle

• SaaS-Feature-Showcases: Präsentation einer vielfältigen Mischung aus Produktfähigkeiten, Leistungsstatistiken, Systemintegrationen und interaktiven UI-Vorschauen auf einem einzigen Landingpage-Bereich.
• Daten- und Metrik-Dashboards: Gruppierung von Key Performance Indicators (KPIs), Diagrammen und operativen Zusammenfassungen in hochdichten visuellen Blöcken.
• Portfolios und Fallstudien: Präsentation kreativer Arbeiten, Projektbilder, Kundenreferenzen und Design-Workflows in einer dynamischen, nichtlinearen Darstellung.
• E-Commerce-Kollektionen: Hervorhebung von Produkten, zeitlich begrenzten Kollektionen, Werbebannern und sozialen Beweisen in einem wirkungsvollen, redaktionellen Layout.

Wann NICHT zu verwenden

• Einheitliche Inhaltslisten: Wenn die Seite aus identischen, sich wiederholenden Elementen besteht (z. B. Standard-Blogbeitragslisten oder Produktraster), verwenden Sie card-ui-system oder responsive-grid-system.
• Rein hierarchisches Storytelling: Für Layouts, die auf einer linearen, sequenziellen Erzählung basieren (z. B. „Schritt 1, Schritt 2, Schritt 3"), verwenden Sie step-progress-system oder section-composition-system.
• Komplexe tabellarische Daten mit hohem Volumen: Wenn Benutzer genaue technische Werte vergleichen oder Zeilen alphanumerischer Daten lesen müssen, verwenden Sie data-table-ui-system.
• Inhaltsgetriebene Artikel: Für redaktionelle Seiten, deren Kernfokus auf ununterbrochenem, fließendem Text liegt, verwenden Sie article-layout-system.

Eingaben

1. Content Inventory & Priority: Eine Liste der Elemente, die im Bento-Grid platziert werden sollen, klassifiziert nach Hierarchie (1 Core Hero, 2-3 Supporting, 2-4 Accents).
2. Visual Asset Taxonomy: Der Asset-Typ in jeder Zelle (statisches Bild, animierte Illustration, interaktiver Slider, reiner Text, numerische Metrik).
3. Target Columns & Breakpoints: Desktop-Spalten-System (typischerweise ein 4-Spalten-Master-Grid), Tablet-Adaption (typischerweise 2 Spalten) und mobile Stapelungsregeln.
4. Fluid Spacing Scale: Fließende Margin- und Padding-Tokens für Abstände und interne Zellenlayouts (aus fluid-spacing-system).
5. Brand Design Tokens: Typografie-Skala, Rahmenradien, Rahmenstile, Hintergrundfüll-Skalen und Elevation-Tokens (aus elevation-and-depth-system und fluid-typography-system).

Ausgaben

1. Bento Grid Geometry Map: Ein proportionaler Koordinatenbauplan, der Spalten-Spans (grid-column: span X) und Zeilen-Spans (grid-row: span Y) für jede Zelle festlegt.
2. Internal Card Anatomy Specs: Regeln für strukturelle Abstände, Inhaltsverschachtelung und Ausrichtung innerhalb verschiedener Zellen-Seitenverhältnisse.
3. DOM Ordering & Accessibility Map: Eine logische Tab-Reihenfolge, die zeigt, wie die HTML-Quellstruktur die Zugänglichkeit über unregelmäßige visuelle Positionen hinweg aufrechterhält.
4. Responsive Stacking Plan: Präzise Übergangsspezifikationen, die zeigen, wie das asymmetrische Grid zu Tablet- und Mobilbildschirmen vereinfacht wird.

---

Workflow

1. Grid-Geometrie und Spalten festlegen

Beginnen Sie mit der Definition des zugrundeliegenden Koordinatengitters.

• Master-Grid-Struktur: Standardisieren Sie auf ein 4-Spalten-CSS-Grid für Desktop-Layouts (1200px+). Dies bietet hervorragende mathematische Faktoren für Zellenbreiten (1/4, 2/4, 3/4 oder 4/4 Breiten).
• Asymmetrische Track-Höhen: Setzen Sie die Höhe von Zeilen explizit oder verwenden Sie grid-auto-rows: minmax(180px, auto), um eine quadratische oder horizontale rechteckige proportionale Basis zu schaffen (Seitenverhältnis 1:1 oder 2:1 pro Einheit).
• Fluid Gutters: Verwenden Sie ein fließendes Abstands-Token für den Grid-Abstand (z. B. gap: clamp(16px, 2vw, 24px)), um die Zellen visuell getrennt, aber eng verbunden zu halten.

2. Inhalt nach visueller Hierarchie zuordnen und verteilen

Verteilen Sie Elemente nicht nach dem Zufallsprinzip. Klassifizieren Sie jede Zelle in eine von drei strukturellen Ebenen:

• Die Core-Hero-Zelle (Spannt 2x2 oder 3x2 Tracks): Nimmt etwa 40–50 % der Grid-Fläche ein. Beherbergt das wichtigste visuelle Asset, Video oder die wichtigste Metrik. Sie bestimmt den visuellen Einstiegspunkt des gesamten Abschnitts.
• Supporting-Zellen (Spannt 2x1 oder 1x2 Tracks): Heben Zwischenfunktionen oder Schlüsselstatistiken hervor. Sie sind höher oder breiter als Basisblöcke, um strukturierten Text neben einer Grafik unterzubringen.
• Accent-Zellen (Spannt 1x1 Tracks): Reserviert für kleine visuelle Elemente, einfache Ein-Wert-Metriken, Symbole oder Badges. Sie runden das Grid ab, um einen rechteckigen Abschluss zu gewährleisten.

3. Die innere Anatomie einer Bento-Zelle entwerfen

Wenden Sie strenge interne Abstandsbeschränkungen an, um die Zellen kohärent zu halten:

• Einheitliches Padding: Verwenden Sie konsistente Innenabstände über alle Zellen hinweg, typischerweise ein fließendes Padding-Token (z. B. padding: var(--space-m)). Ausnahme: Accent-Zellen (1x1) können etwas engere Abstände (--space-s) verwenden.
• Innere Ausrichtungsmodi: Verwenden Sie Flexbox (display: flex; flex-direction: column; justify-content: space-between) innerhalb der Zellen, um Textblöcke oben und visuelle Akzente (Metriken, Grafiken) unten vertikal auszurichten.
• Hintergrund und Rahmen: Standardisieren Sie einen einheitlichen Rahmenradius (z. B. border-radius: 16px bis 24px) über alle Zellen hinweg. Verwenden Sie eine dezente Hintergrundfüllung (z. B. eine neutrale Tönung, transluzenter Glassmorphismus-Hintergrund oder eine kontrastarme Kartenoberfläche), um klare Kartengrenzen zu schaffen.

4. DOM-Reihenfolge für Tastatur- und Screenreader-Zugänglichkeit organisieren

Unregelmäßige Grid-Layouts können zu einer Diskrepanz zwischen der visuellen Lesereihenfolge und der physischen DOM-Reihenfolge führen.

• Natürlicher Lesefluss: Ordnen Sie die Elemente im HTML-Dokument in einer logischen Reihenfolge von links nach rechts, von oben nach unten an, wie sie gelesen werden würden.
• Keine Order-Modifikation: Verwenden Sie niemals order in CSS oder positionieren Sie Zellen willkürlich so, dass fokussierbare Elemente übersprungen werden. Wenn Zelle 1 oben links und Zelle 2 oben rechts platziert ist, müssen sie in genau dieser Reihenfolge im DOM erscheinen, auch wenn das CSS-Grid-Layout sie unterschiedlich spannt.
• Semantische Überschriften: Geben Sie jeder inhaltsreichen Zelle eine klare, beschreibende Überschrift (typischerweise <h3> oder <h4>), die der Gliederung des übergeordneten <h2>-Abschnitts entspricht.

5. Responsive Stapelung und Breakpoints definieren

Stellen Sie sicher, dass das Grid anmutig auf Viewport-Skalierungen reagiert:

• Desktop (1200px+): 4-Spalten-Layout. Asymmetrische Spalten- und Zeilen-Spans.
• Tablet (768px - 1199px): Wechsel zu einem 2-Spalten-Grid. Ordnen Sie die Spans neu zu, sodass Zellen, die 1x1 waren, 1 Spalte spannen, und 2x1-Zellen beide Spalten (2 Spalten, volle Breite) spannen.
• Mobil (unter 767px): Reduzieren Sie das Grid vollständig auf einen 1-Spalten-Vertikal-Stack (grid-template-columns: 1fr). Entfernen Sie explizite Zeilenhöhen (grid-auto-rows: auto) und lassen Sie Elemente natürlich fließen, wobei die Höhe durch interne Abstände und Inhaltsgröße bestimmt wird.

---

Entscheidungsregeln

Wann Spalten vs. Zeilen gespannt werden

Inhaltstyp	Entscheidungsregel für Spans	Empfohlene Desktop-Geometrie
Hochwirksame Metrik / Hauptmerkmal	Spannen Sie sowohl Spalten als auch Zeilen, um einen Fokuspunkt zu schaffen.	grid-column: span 2; grid-row: span 2;
Breite Visuals / Zeitlinien / Diagramme	Spannen Sie Spalten horizontal; behalten Sie die Höhe bei 1 Zeile, um den Blick horizontal zu lenken.	grid-column: span 2; grid-row: span 1;
Lange Textlisten / Hohe Bilder	Spannen Sie Zeilen vertikal; behalten Sie die Breite bei 1 Spalte, um den Blick nach unten zu lenken.	grid-column: span 1; grid-row: span 2;
Einzelmetriken / Badges / Symbole	Kein Spanning. Behalten Sie einen Standard-Quadratblock bei.	grid-column: span 1; grid-row: span 1;

Typografie-Skalierung in Bento-Zellen

• Adaptive Größenanpassung: Verwenden Sie nicht dieselbe Typografiegröße für alle Karten. Halten Sie die Typografie-Skala proportional zur Kartengröße.
• Hero-Karte: Verwenden Sie font-size: clamp(1.5rem, 4cqi, 2.25rem) (unter Verwendung von Container-Query-Einheiten cqi, falls unterstützt) für Überschriften.
• Accent-Karte (1x1): Begrenzen Sie die Überschrift auf font-size: clamp(1rem, 2.5cqi, 1.25rem) und halten Sie Beschreibungen kurz (maximal 2 Zeilen) oder verzichten Sie ganz auf Beschreibungen zugunsten eines Symbols + Metrik.

Inhaltsbegrenzung vs. Ausbluten

• Contained Layout: Platzieren Sie Inhalte vollständig innerhalb des Karten-Paddings mit einem Mindestabstand von 16px zwischen Text und Rändern. Am besten für textlastige, informative Karten.
• Bleed Layout: Lassen Sie visuelle Elemente (Produktscreenshots, detaillierte 3D-Mockups, komplexe Diagramme) bis zu den unteren und/oder rechten Rändern der Karte auslaufen, wobei Überlauf maskiert wird (overflow: hidden auf der Zelle). Der Text bleibt oben mit Abstand und lesbar. Verwenden Sie dies für die Core-Hero- und unterstützende visuelle Karten.

---

Einschränkungen

• Fokussichtbarkeit (WCAG 2.2 SC 2.4.11 / 2.4.13): Wenn eine Zelle fokussierbar ist (z. B. als großer Link-Karte fungiert), muss sie eine explizite, kontrastreiche :focus-visible-Umrandung aufweisen. Fokus-Indikatoren dürfen niemals durch den übergeordneten Grid-Container oder die Kartengrenzen abgeschnitten werden.
• Touch Targets (WCAG 2.2 SC 2.5.8): Alle interaktiven Elemente innerhalb von Bento-Zellen (Schaltflächen, Aufklapp-Toggles, Schieberegler) müssen eine Mindestzielgröße von 24x24px mit ausreichendem umgebenden Abstand haben, wobei 44x44px für mobile Auslöser bevorzugt wird.
• Lesereihenfolgenübereinstimmung (WCAG 2.1 SC 1.3.2): Die von Screenreadern geparste Inhaltsreihenfolge muss mit der semantischen Bedeutung und der visuellen Reihenfolge des Bento-Grids übereinstimmen. Die Zelle oben links muss im Quell-DOM immer vor den Zellen unten rechts erscheinen.
• Kontrastverhältnisse (WCAG AA): Jeglicher Text in Bento-Karten muss einen Mindestkontrast von 4.5:1 gegenüber dem Kartenhintergrund aufweisen. Vermeiden Sie die Verwendung von kontrastarmen, subtilen Grautönen für Beschreibungen in getönten Karten.

---

Häufige Fehlermuster

• Der „Visual Junk Drawer"-Effekt: Beliebige Elemente in ein Bento-Grid zu stopfen, nur weil sie hineinpassen. Jede Zelle muss einen kohärenten Storytelling-Zweck für die übergeordnete Seite erfüllen.
• DOM-Visual-Konnektivitätsfehler: Karten visuell in einer Reihenfolge anordnen, aber in einer völlig anderen Sequenz im HTML belassen. Screenreader- und Tastatur-Tab-Navigation springen chaotisch durch das Grid.
• Die mobile Layout-Explosion: Beibehaltung hartcodierter Spalten-Spans auf mobilen Bildschirmen, was die Karten zum Schrumpfen zwingt, sodass Text überläuft und völlig unleserlich wird.
• Kollidierende übermäßige Rahmenradien: Verwendung eines massiven Randradius auf Karten bei gleichzeitigen winzigen, scharfen Rändern, oder Verschachtelung innerer Elemente mit Randradien, die nicht zur konzentrischen Eckkurve der äußeren Karte passen.
• Fehlen eines Fokusankers: Erstellen eines Rasters, in dem alle Zellen exakt gleich groß sind (z. B. alle 1x1 oder alle 2x1), was den Einstiegspunkt des Layouts eliminiert und zu Ermüdung beim Scannen führt.

---

Validierungskriterien

• Einheitliche Geometrie: Das Grid verwendet ein zugrundeliegendes, konsistentes Koordinatensystem (idealerweise ein 4-Spalten-Layout auf dem Desktop) mit einheitlichen Abständen.
• Klare Hierarchie: Ein einzelner „Hero"-Block ist visuell dominant und schafft einen klaren Layout-Einstiegspunkt.
• Natürliche Tab-Reihenfolge: Das Durchtabben der Grid-Elemente bewegt sich vorhersagbar von links nach rechts, von oben nach unten und stimmt mit dem visuellen Layout überein.
• Mobile Stapelbarkeit: Das Layout wechselt sauber zu einem einspaltigen Stack auf mobilen Viewports (< 768px) ohne horizontalen Überlauf.
• Konsistenz der Innenabstände: Das Zellen-Padding ist über alle ähnlichen Karten hinweg identisch, mit einheitlicher vertikaler Ausrichtung der Elemente.
• Kontrast-AA-Konformität: Kontrastverhältnisse für alle Textblöcke und Statusindikatoren in jeder Karte erfüllen mindestens den WCAG-AA-Standard von 4.5:1.
• Interaktive Sicherheit: Berührungsziele für alle Widgets innerhalb der Bento-Karten erfüllen die WCAG-2.2-Mindestmaße von 24x24px.