So baust du einzigartige CMS Grids in Webflow

Wolltest du schon immer ein CMS Grid, das komplett custom aussieht, aber trotzdem die Gesichter direkt aus deiner Collection zieht? In diesem Webflow Tutorial baust du genau das: ein individuelles, schwer nachzubauendes Layout, an dem die meisten KI Tools scheitern.

Du lernst, wie du eine Testimonial Collection List anbindest, einzelne Items per nth-child Logik direkt im Webflow Designer targetest (fast ohne Custom Code) und alles mit Container Query Units perfekt skalieren lässt. Das Ergebnis ist ein responsives Grid, das seine Proportionen auf Tablet und Mobile behält, ohne endloses Nachbauen pro Breakpoint.

Ein CMS Grid, das custom aussieht und trotzdem dynamisch bleibt

Manche Layouts sind schwer zu faken. Genau so ein Design ist dieses Testimonial Grid: eine individuelle, leicht unregelmäßige Anordnung von Gesichtern, die die meisten KI Tools nicht sauber nachbauen können. Und genau deshalb funktioniert es so gut auf deiner eigenen Seite. Es wirkt handgemacht, obwohl jedes Bild direkt aus einer CMS Collection kommt. Sobald ein neues Testimonial live geht, taucht ein neues Gesicht automatisch im Grid auf.

In diesem Tutorial baust du dieses Layout gemeinsam mit mir auf. Das Ziel ist ein Grid, das drei Dinge gleichzeitig schafft:

• Es wirkt komplett custom und ist schwer zu kopieren
• Es bleibt über das CMS dynamisch
• Es skaliert sauber vom Desktop bis zum Mobile, ohne endloses Breakpoint Gefummel

Die Collection List aufsetzen

Die Grundlage ist eine Collection List, keine statischen Bilder. Die Struktur ist schnell aufgesetzt:

1. Füge in deinem Container ein umschließendes Div ein, zum Beispiel user-collage
2. Füge darin ein user-grid-wrapper Div ein
3. Platziere deine Collection List im Wrapper und verbinde sie mit deinen Testimonials
4. Füge ein Bildelement hinzu, gib ihm eine Klasse wie user-grid-item-image und verbinde es mit dem CMS Bildfeld

Dann stellst du die Collection List selbst so ein, dass nur die richtigen Items angezeigt werden:

• Filtere so, dass nur Items mit Bild sichtbar sind
• Sortiere nach Erstelldatum von neu nach alt
• Limitiere die Liste auf vier Items, da das Design vier Bilder hat

Einzelne Items ohne schweren Custom Code stylen

Jetzt kommt die eigentliche Herausforderung. Webflow lässt dich einzelne Items innerhalb einer Collection List nicht umsortieren oder manuell stylen. Jedes Item teilt sich dieselbe Klasse, du kannst also nicht einfach das zweite greifen und größer machen.

Wenn du dich mit Custom Code auskennst, weißt du bereits, dass CSS das erste, die ungeraden, die geraden und das letzte Element in einer Gruppe targeten kann. Normalerweise bedeutet das etwas Custom CSS. Aber weil es hier nur vier Bilder gibt, kannst du das meiste direkt im Webflow Designer machen.

Setze zuerst Flexbox auf das List Element und gib jedem user-grid-item eine Breite auf Basis von em Units. Nimm eine Referenzgröße, zum Beispiel 192 geteilt durch 16, und nutze überall em. Öffne dann das Breiten Dropdown am Item und targete jeden Zustand einzeln:

1. Erstes Item bekommt einen kleineren Wert, damit es enger sitzt
2. Gerades Item (das zweite) bekommt seine eigene Breite
3. Ungerade Items werden nach oben geschoben, damit das dritte höher sitzt
4. Letztes Item bekommt eine eigene Breite, um den unregelmäßigen Look abzuschließen

Allein damit baust du die designte, leicht ungleichmäßige Anordnung nach, komplett im Designer.

Namen, Berufe und bedingte Badges

Das Layout ist mehr als nur Bilder. Jedes Item trägt außerdem einen Namen, einen Beruf und manchmal einen Badge Text. Wickle ein Textelement in ein Div, nutze eine globale Klasse wie infotext, damit es klein bleibt, und füge etwas prozentuales Padding links und rechts hinzu.

Weil nicht jedes Testimonial einen Badge hat, nutze conditional visibility. Richte es so ein:

• Der Badge Text erscheint nur, wenn das Badge Feld tatsächlich gefüllt ist
• Der Trennpunkt davor folgt derselben Bedingung

Das hält das Design sauber und vermeidet leere Punkte oder Striche, die frei herumschweben.

Eine Gradient Shape Komponente wiederverwenden

Die Gradient Shape hinter dem Grid ist nicht von Grund auf neu gebaut. Sie ist eine Komponente, die auf der ganzen Seite wiederverwendet wird. Zieh sie rein, setze die Grid List auf position relative, damit die Shape korrekt sitzt, und gib der Shape einen eindeutigen Namen wie user-top, damit du sie frei bewegen, rotieren und spiegeln kannst.

Das Schöne ist, wie flexibel diese Komponente ist:

• Derselbe Gradient funktioniert überall und lässt sich rotieren oder spiegeln
• Verschiedene SVG Shapes aus dem Formburg Logo werden je nach Platzierung eingesetzt
• Diese Shapes werden im Hintergrund in eine CSS Mask umgewandelt

So bekommst du eine mächtige, wiederverwendbare Custom Komponente, ohne sie jedes Mal neu zu bauen.

Mit Container Query Units skalieren lassen

Das ist der Teil, der das ganze Layout mühelos wirken lässt. Solange die Bilder em nutzen, skalieren sie nicht mit, wenn der Viewport kleiner wird, nur der Gradient tut es. Die Lösung sind Container Query Units:

1. Setze am user-grid-wrapper die Custom Property container-type auf inline size
2. Überschreibe die Font Size an genau diesem Wrapper
3. Statt der Body Font Size verbindest du sie mit einer Container Query Width, sodass eine Einheit einem Prozent des Wrappers entspricht

Jetzt skaliert jedes Bild, das em nutzt, proportional zum Container selbst. Verkleinere den Viewport und das komplette Grid skaliert als ein Stück, Bilder und Gradient zusammen. Willst du alles etwas größer? Erhöhe einfach die Base Font Size auf 1.5 und das ganze Grid wächst, während der Info Text seine Größe behält, weil er nicht von dieser Einheit abhängt.

Obere Elemente, Counter und versteckte Items

Der obere Bereich nutzt dieselbe Struktur ohne Collection List. Füge ein einfaches Div mit der Klasse user-grid-list hinzu, damit es dasselbe CSS erbt, und dupliziere die Items passend zu den Größen. Eine Dot Komponente mit einer Accent Variante bringt den kleinen roten Signalpunkt, in festen Pixeln gehalten, damit er nie mitskaliert.

Der Counter und die versteckten Items brauchen etwas mehr Sorgfalt:

• Nutze einen Span mit deinem dynamischen Member Attribut, damit immer die echte Zahl der Teilnehmer angezeigt wird
• Verstecke die zusätzlichen Textelemente mit einem kleinen Code Embed
• Setze diese Elemente auf position absolute, damit sie den Content Flow nicht mehr verschieben
• Zeige nur das gewünschte Item über w-dyn-item mit einem nth-child Target wie dem dritten Child

Untere Collage und zufällige Dots

Die untere Collage ist im Grunde ein Duplikat der oberen mit ein paar Combo Klassen. So positionierst du sie um:

1. Füge eine cc-bottom Klasse hinzu, um das Grid nach unten links zu verschieben
2. Drehe die Größenwerte der Items um, damit sich die Anordnung von oben unterscheidet
3. Tausche die Gradient Shape gegen die untere Variante

Zum Schluss streust du ein paar absolut positionierte Dots über den Bereich. Nutze einen Wrapper mit pointer events none, platziere die Dots in einer Grid Row über deine Framework Spalten und schiebe sie mit negativen Margins zurecht. Diese kleinen Details heben das Layout von gut auf poliert.

Schnelle Responsiveness dank skalierbarer Units

Weil bereits alles auf skalierbaren Units basiert, ist die Responsive Arbeit minimal. Auf Tablet und Mobile brauchst du nur ein paar Anpassungen:

• Wechsle die Wrapper Einheit von Container Query Width zu vw, da sich eine vw fast wie eine Container Query Width verhält, wenn der Container volle Breite hat
• Erhöhe sie auf etwa 2vw, damit das Grid auf kleineren Bildschirmen etwas größer wird
• Positioniere die Gradient Shapes für jeden Breakpoint neu
• Blende die winzigen Detail Dots auf Mobile aus, wo der Platz knapp ist

Damit ist die ganze Struktur fertig. Ein einzigartiges, CMS gesteuertes Grid, das sauber über alle Breakpoints skaliert, mit kaum Custom Code. Im nächsten Tutorial legst du eine custom GSAP Animation über dieses Layout, sodass die Gesichter für etwas mehr Leben ein und ausanimieren.