Bento Grid Tailwind: Fertiger Code & moderne Beispiele 2026

Об этом предложении

Von Lawrence Dauchy Veröffentlicht am 3. Oktober 2026 Ein Bento Grid mit Tailwind baust du mit CSS Grid, unterschiedlich großen Karten und einer responsiven Spaltenstruktur. Du beginnst mit einer Spalte auf kleinen Bildschirmen und ergänzt auf größeren Displays breite oder hohe Elemente. Entscheidend sind eine klare Reihenfolge, passende Abstände und Karten, deren Größe zum Inhalt passt. Das folgende Beispiel liefert dir eine vollständige React-Komponente für ein bereits eingerichtetes Tailwind-Projekt. Sie kommt ohne zusätzliche Komponentenbibliothek, externe Bilder oder JavaScript für das Layout aus. Anschließend kannst du das Raster für eine Produktseite, ein Portfolio oder ein Dashboard anpassen. Was ist ein Bento Grid und wann lohnt es sich? Ein Bento Grid ist ein Kartenlayout, das unterschiedlich große Inhaltsbereiche in einem gemeinsamen Raster verbindet. Eine große Karte setzt den Schwerpunkt, kleinere Karten ergänzen Funktionen, Kennzahlen oder Beispiele. Der Name erinnert an eine Bento-Box mit mehreren Fächern. Im Webdesign entsteht daraus eine Fläche, auf der jedes Element eine eigene Aufgabe bekommt. Die Karten teilen sich Abstände und Gestaltung, müssen aber nicht dieselbe Größe haben. Das funktioniert besonders gut, wenn du mehrere Informationen gleichzeitig zeigen möchtest: Eine Produktseite stellt eine Hauptfunktion und ergänzende Vorteile vor. Ein Portfolio kombiniert ein großes Projekt mit kleineren Arbeiten. Ein Dashboard verbindet eine zentrale Auswertung mit Statusanzeigen. Eine persönliche Website zeigt Vorstellung, Fähigkeiten und aktuelle Projekte. Eine Funktionsübersicht gruppiert kurze Erklärungen mit visuellen Beispielen. Die Kartengröße sollte dabei eine Bedeutung haben. Ein ausführlicher Produktüberblick darf mehr Platz bekommen als ein kurzer Status. Wenn jede Karte gleich laut wirkt, fehlt dem Raster eine erkennbare Hierarchie. Ein Bento Grid unterscheidet sich außerdem von einem Masonry-Layout. Bei Masonry werden Elemente unterschiedlicher Höhe typischerweise möglichst lückenarm angeordnet. Ein Bento Grid arbeitet meist mit bewusst gesetzten Zeilen, Spalten und Flächen. Für einen langen Text, eine lineare Anleitung oder ein umfangreiches Formular ist eine normale Seitenstruktur häufig angenehmer. Das Raster lohnt sich, wenn die Inhalte eigenständig verständlich bleiben und gemeinsam einen schnellen Überblick ermöglichen. Welche Tailwind-Klassen brauchst du für das Raster? Für den Einstieg reichen grid , eine Spaltenanzahl, ein Abstand und responsive Klassen für die einzelnen Karten. Tailwind übersetzt diese Utilities in die entsprechenden CSS-Grid-Eigenschaften. Die Grundstruktur sieht so aus: <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"> <!-- Karten --> </div> grid-cols-1 legt eine Spalte fest. Mit md:grid-cols-2 und lg:grid-cols-4 erweitert sich das Raster an den jeweiligen Breakpoints. Die Karten bleiben dadurch auf schmalen Bildschirmen untereinander lesbar. Die wichtigsten Klassen für unterschiedlich große Karten sind: lg:col-span-2 lässt eine Karte ab dem großen Breakpoint zwei Spalten belegen. lg:row-span-2 lässt sie dort zwei Zeilen belegen. gap-4 setzt einen gemeinsamen Abstand zwischen den Karten. min-w-0 hilft, Inhalte innerhalb einer Karte schrumpfen zu lassen. h-full lässt eine innere Fläche die verfügbare Höhe ausfüllen. Spalten- und Zeilenüberspannungen verändern die belegte Fläche einer Karte. Sie legen allerdings nicht automatisch eine sinnvolle Höhe für deren Inhalt fest. Deshalb ist es hilfreich, zwei Entscheidungen zu trennen: Wie viele Rasterfelder bekommt die Karte, und wie viel Platz braucht ihr Inhalt? Für eine Funktionsübersicht funktionieren natürliche Höhen oft gut. Für ein bewusst geometrisches Desktoplayout kannst du zusätzlich eine minimale Zeilenhöhe verwenden: <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:auto-rows-[minmax(180px,auto)] lg:grid-cols-4" > <!-- Karten --> </div> Damit dürfen die Zeilen bei längeren Inhalten wachsen. Eine starre Höhe würde dagegen schneller zu abgeschnittenen Texten führen. Wie sieht ein fertiges Bento Grid mit React und Tailwind aus? Die folgende Komponente erstellt fünf Karten: eine große Einführung, zwei kompakte Funktionskarten, eine hohe Ablaufkarte und eine breite Abschlusskarte. Auf kleinen Bildschirmen stehen sie untereinander. Voraussetzung ist ein React-Projekt mit funktionierender Tailwind-Einbindung. Speichere die Komponente beispielsweise als BentoGrid.jsx und rendere sie auf deiner Seite. export default function BentoGrid() { const card = "min-w-0 rounded-3xl border border-slate-200 " + "bg-white p-6 shadow-sm sm:p-8"; return ( <main className="min-h-screen bg-slate-50 px-4 py-16 sm:px-6"> <section aria-labelledby="bento-heading" className="mx-auto max-w-6xl" > <header className="mb-8 max-w-2xl"> <p className="text-sm font-semibold text-indigo-700"> Dein Arbeitsbereich </p> <h1 id="bento-heading" className="mt-3 text-4xl font-semibold tracking-tight text-slate-950 sm:text-5xl" > Mehr Überblick für deine Projekte. </h1> <p className="mt-4 text-lg leading-8 text-slate-600"> Aufgaben, Fortschritt und Zusammenarbeit an einem gemeinsamen Ort. </p> </header> <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:auto-rows-[minmax(180px,auto)] lg:grid-cols-4" > <article className={`${card} flex flex-col justify-between md:col-span-2 lg:row-span-2`} > <div> <p className="text-sm font-medium text-indigo-700"> Projekte </p> <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-950" > Ein Plan, den dein Team versteht. </h2> <p className="mt-4 max-w-md leading-7 text-slate-600"> Sammle Aufgaben, halte Entscheidungen fest und erkenne, was als Nächstes ansteht. </p> </div> <div className="mt-8 rounded-2xl bg-slate-100 p-4"> <p className="text-sm font-semibold text-slate-800"> Beispielprojekt: Website </p> <ul className="mt-4 space-y-3 text-sm text-slate-700"> <li className="rounded-xl bg-white p-3"> Inhalte vorbereiten </li> <li className="rounded-xl bg-white p-3"> Layout abstimmen </li> <li className="rounded-xl bg-white p-3"> Veröffentlichung prüfen </li> </ul> </div> </article> <article className={card}> <p className="text-sm font-medium text-slate-500"> Fokus </p> <h2 className="mt-3 text-xl font-semibold text-slate-950"> Klare Prioritäten </h2> <p className="mt-3 leading-7 text-slate-600"> Zeige zuerst die Aufgaben, die dein Projekt weiterbringen. </p> </article> <article className={`${card} bg-indigo-50 lg:row-span-2`} > <p className="text-sm font-medium text-indigo-700"> Ablauf </p> <h2 className="mt-3 text-xl font-semibold text-slate-950"> Vom Entwurf zur Freigabe </h2> <ol className="mt-6 space-y-5 text-sm text-slate-700"> <li> <span className="font-semibold">1. Sammeln</span> <p className="mt-1 leading-6"> Ideen und Anforderungen festhalten. </p> </li> <li> <span className="font-semibold">2. Umsetzen</span> <p className="mt-1 leading-6"> Aufgaben verteilen und bearbeiten. </p> </li> <li> <span className="font-semibold">3. Prüfen</span> <p className="mt-1 leading-6"> Ergebnisse gemeinsam freigeben. </p> </li> </ol> </article> <article className={card}> <p className="text-sm font-medium text-slate-500"> Zusammenarbeit </p> <h2 className="mt-3 text-xl font-semibold text-slate-950"> Weniger Rückfragen </h2> <p className="mt-3 leading-7 text-slate-600"> Halte Zuständigkeiten direkt bei der jeweiligen Aufgabe fest. </p> </article> <article className={`${card} md:col-span-2 lg:col-span-4`} > <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between" > <div> <h2 className="text-xl font-semibold text-slate-950"> Starte mit einem überschaubaren Projekt. </h2> <p className="mt-2 leading-7 text-slate-600"> Ergänze weitere Abläufe, sobald die Grundstruktur funktioniert. </p> </div> <span className="self-start rounded-full bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700" > Beispielansicht </span> </div> </article> </div> </section> </main> ); } Die Inhalte beschreiben eine fiktive Projektoberfläche. Ersetze sie durch echte Funktionen deines Produkts. Das Beispiel enthält bewusst keine erfundenen Erfolgszahlen und keine Schaltflächen ohne Funktion. Auf großen Bildschirmen nimmt die erste Karte die linke Hälfte über zwei Zeilen ein. Die Ablaufkarte liegt rechts und ist ebenfalls zwei Zeilen hoch. Die beiden kompakten Karten teilen sich die verbleibende Spalte. Die Abschlusskarte belegt eine eigene Zeile über die gesamte Breite. Dadurch bleibt der nächste Schritt sichtbar vom Funktionsbereich getrennt. Wie machst du das Bento Grid wirklich responsiv? Ein responsives Bento Grid beginnt mit einer sinnvollen mobilen Reihenfolge. Breite und hohe Karten entstehen erst dort, wo ausreichend Platz vorhanden ist. Tailwind arbeitet bei seinen normalen Breakpoint-Varianten nach dem Mobile-first-Prinzip: Klassen ohne Präfix gelten grundsätzlich, Varianten wie md: greifen ab dem jeweiligen Breakpoint. Im Beispiel bedeutet das: Mobil bekommt jede Karte eine eigene Zeile. Auf mittleren Bildschirmen entstehen zwei Spalten. Auf großen Bildschirmen entstehen vier Spalten. Die hohe Kartenform wird erst auf großen Bildschirmen aktiviert. Ein häufiger Fehler ist eine unbedingte Spaltenüberspannung: <article class="col-span-2"> Inhalt </article> In einem einspaltigen Raster kann das zusätzliche implizite Spalten erzeugen. Verwende deshalb ein passendes Präfix, wenn die Karte nur auf größeren Displays breiter sein soll: <article class="md:col-span-2"> Inhalt </article> Prüfe außerdem die Zwischenbreiten. Ein Layout kann auf einem großen Monitor und einem kleinen Smartphone gut aussehen, aber auf einem schmalen Tablet unruhig werden. Ziehe das Browserfenster langsam schmaler. Achte darauf, wann Überschriften ungünstig umbrechen und Karten zu wenig Platz bekommen. Der passende Breakpoint richtet sich nach deinem Inhalt. Bei langen deutschen Begriffen helfen ausreichend breite Karten und ein flexibler Textbereich. Kürze wichtige Beschriftungen sinnvoll, statt die Schrift