Zum Inhalt springen
Musterli

Bento-Grid

Ungleich grosse, abgerundete Kacheln in einem Raster, ohne Lücken. Für Feature-Sektionen, Portfolios und Social-Grafiken, als CSS Grid, Tailwind oder Bild.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem Bento-Grid

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

Ein Bento-Grid ordnet Inhalte in Kacheln unterschiedlicher Grösse an, wie die Fächer einer Bento-Box. Das Layout ist beliebt für Feature-Sektionen, Portfolios, Dashboards und Social-Media-Grafiken. Der Generator füllt das Raster immer vollständig, ohne Lücken.

So geht’s

Lege Spalten, Zeilen und die gewünschte Anzahl Kacheln fest. Mit kleinster und grösster Kachel steuerst du, wie unterschiedlich die Kacheln werden. Drücke die Leertaste für eine neue Aufteilung oder sperre die Aufteilung und würfle nur die Farben neu. Exportiere als CSS Grid mit HTML, als Tailwind-Klassen, als SVG oder Bild.

Bento-Grid jetzt ausprobieren

Häufige Fragen

Kann ich einzelne Kacheln verschieben?
Nein, Musterli ist bewusst kein Layout-Editor. Du würfelst Aufteilungen, bis eine passt, und sperrst sie mit dem Schloss. Spalten, Zeilen und Kachelgrössen steuerst du über die Regler.
Funktioniert das Raster auch auf dem Handy?
Ja. Der CSS-Code ordnet die Kacheln unter 768 px Breite in Lesereihenfolge in weniger Spalten an. Wie viele, stellst du unter Spalten auf schmalen Bildschirmen ein.
Bleiben Lücken im Raster?
Nie. Das Raster wird so lange entlang der Zellgrenzen geteilt, bis die gewünschte Anzahl Kacheln erreicht ist. Jede Zelle gehört genau zu einer Kachel.
Brauche ich Tailwind für den Code?
Nein. Der Export CSS Grid + HTML läuft in jedem Browser ohne Framework. Die Tailwind-Klassen sind eine Alternative für Projekte mit Tailwind.
Kann ich Text, Symbole und Bilder in die Kacheln setzen?
Ja. Klicke in der Vorschau auf eine Kachel oder wähle sie mit Tab und den Pfeiltasten. Du kannst Titel, Untertitel, ein Symbol, eine eigene Grafik und ein Hintergrundbild setzen. Bilder bleiben in deinem Browser: Im Teilen-Link fehlen sie, und der Code verweist auf Platzhalter-Dateien, die du durch deine Bilder ersetzt.

Passende Generatoren

Alle Generatoren in CSS-Effekte und Layouts