Ein sich wiederholendes Flexbox-Muster mit CSS :nth-child(), das einer Webflow Collection List ein redaktionelles, individuell gestaltetes Layout gibt, samt Code und kostenlosem Cloneable.
Kennst du das Gefühl, wenn deine Webflow Collection List... okay aussieht, aber auch so, als hätte sie ein Bot gebaut? Das ist vielleicht ein bisschen hart. Aber Webflow Collection Lists sehen nun mal aus wie Collection Lists: Ein Item gleicht dem anderen. Du kannst einiges anpassen, bedingte Sichtbarkeit nutzen und etwas aus- oder einblenden. Meistens bleibt es aber ein Raster oder eine Liste, und das Layout wiederholt sich. Ja, uns geht es genauso. Einheitliche Karten, identische Breiten, wie eine Excel-Tabelle, die versucht, eine Website zu sein.
Aber was, wenn du aus der Monotonie ausbrechen könntest, ohne 15 Combo-Klassen zu brauchen oder Collection Lists zu duplizieren? Auftritt: der Held dieser Geschichte, der :nth-child()-Selektor. Wenn du danach gesucht hast, wie nth child css funktioniert, und hier gelandet bist, bist du richtig, und es funktioniert auch in Webflow.
Und heute nutzen wir ihn nicht einfach nur, wir lassen ihn loopen, und zwar nicht wie dieser Straßenmusiker an der Promenade... Was natürlich glatt gelogen ist, wir loopen ihn genau wie ein Straßenmusiker an der Promenade. Und am Ende gibt es ein praktisches Cloneable, das dir das Ganze leichter macht.
Was ist ein nth-child?
Nun, das achte Kind des achten Kindes wäre ein Zauberer im Quadrat, aber das beiseite: Dieses Projekt nutzt einen mächtigen CSS-Selektor namens :nth-child(), um das standardmäßige, austauschbare Layout einer Webflow Collection List aufzubrechen. Normalerweise bekommt jedes CMS-Item dasselbe Styling (langweilig). Mit :nth-child() kannst du Items aber nach ihrer Position in der Liste ansprechen. Zum Beispiel wählt :nth-child(3) das 3. Item aus, :nth-child(2n) greift jedes zweite, und :nth-child(6n+1) trifft jedes 6. Item + 1 (1., 7., 13. usw.). Damit bauen wir ein sich wiederholendes Muster aus Layout-Breiten: volle Breite, halb-halb, ein Drittel zu zwei Dritteln, dann wieder von vorn. Es funktioniert mit jeder beliebigen Anzahl an CMS-Items und lässt dein Raster aussehen, als hättest du stundenlang kuratiert… obwohl alles automatisch per Code läuft.
Gängige :nth-child()-Muster und was sie bewirken
:nth-child(3)
Trifft nur das 3. Kind.
Einsatzfall: Eine einzelne hervorgehobene Karte stylen oder ein Item im Layout manuell überschreiben.
:nth-child(odd)
Trifft jedes ungeradzahlige Kind: 1., 3., 5. usw.
Einsatzfall: Zebrastreifen-Hintergründe, abwechselndes Padding oder abwechselnde Abstände.
:nth-child(even)
Trifft jedes geradzahlige Kind: 2., 4., 6. usw.
Einsatzfall: Mit odd kombinieren, um Stile zwischen benachbarten Items abzuwechseln.
:nth-child(3n)
Trifft jedes 3. Item: 3., 6., 9. usw.
Einsatzfall: Abstand nach jeder dritten Karte in einer Reihe einfügen oder jeden dritten Beitrag in einem Raster hervorheben.
:nth-child(3n+1)
Trifft jedes 3. Item, beginnend beim 1.: 1., 4., 7. usw.
Einsatzfall: Ein sich wiederholendes 3er-Layout-Muster von Anfang an starten.
:nth-child(3n+2)
Trifft jedes 3. Item, beginnend beim 2.: 2., 5., 8. usw.
Einsatzfall: Arbeitet mit 3n+1 und 3n+3 zusammen, um Layout-Schleifen mit drei Karten zu bauen.
:nth-child(-n+3)
Trifft nur die ersten 3 Items: 1., 2. und 3.
Einsatzfall: Den ersten paar Items in einem CMS-Raster ein VIP-Styling geben (etwa für Featured Posts).
:nth-child(n+6)
Trifft das 6. Item und jedes weitere danach: 6., 7., 8…
Einsatzfall: Fallback-Styling oder Standard-Layout anwenden, sobald dein Hero-Bereich mit dem Angeben fertig ist.
:nth-child(6n+1)
Trifft jedes 6. Item + 1: 1., 7., 13., 19. usw.
Einsatzfall: Ein sich wiederholendes 6er-Layout-Muster starten, ideal für ein modulares redaktionelles Raster.
:last-child
Trifft das letzte Kind, egal wie viele Items es gibt.
Einsatzfall: Den einsamen Nachzügler am Ende stylen, damit er nicht unglücklich herumsteht (bei uns bekommt er die volle Breite).
Das ist Flex Loop Pattern 6
Dieses scharfe kleine CSS-Layout nutzt die Kraft von Flexbox und :nth-child(), um ein sich alle 6 Items wiederholendes Layout-Muster zu erzeugen, das individuell, redaktionell und voller Rhythmus wirkt. Es ist so gebaut, dass du es einfach kopieren und für dein Webflow-CMS-Raster einfügen kannst.
Was es macht:
- Item 1: volle Breite
- Item 2: 50 %
- Item 3: 50 %
- Item 4: 33,33 %
- Item 5: 66,66 %
- Item 6: keine eigene Regel (die Schleife beginnt bei Item 7 von vorn, das die Behandlung von Item 1 bekommt)
Hier ist der vollständige Code mit Kommentaren:
<style>
/* ===============================
Flex Loop Pattern 6
===============================
A 6-item repeating layout pattern:
1. Full-width
2. Half-width
3. Half-width
4. One-third width
5. Two-thirds width
6. (Repeats from 1)
*/
/* 1. Every 6th + 1 item (1st, 7th, 13th, etc.) spans full width */
.grid .child:nth-child(6n + 1) {
flex-basis: 100%;
}
/* 2 & 3. Next two items take up 50% each (side by side) */
.grid .child:nth-child(6n + 2),
.grid .child:nth-child(6n + 3) {
flex-basis: 50%;
}
/* 4. Fourth item in the pattern takes one-third width */
.grid .child:nth-child(6n + 4) {
flex-basis: 33.33%;
}
/* 5. Fifth item takes two-thirds width, pairing with the one-third */
.grid .child:nth-child(6n + 5) {
flex-basis: 66.66%;
}
/* ===============================
Default Flex Behaviour Reset
===============================
Prevent children from shrinking or growing unexpectedly.
All sizing comes from flex-basis.
*/
.grid .child {
flex-shrink: 0;
flex-grow: 0;
}
/* ===============================
Straggler Safety Net
===============================
If there's a lonely item at the end (e.g. 25th in a set of 25),
make it full width so it doesn't sit awkwardly beside empty space.
*/
.grid .child:last-child {
flex-basis: 100%;
}
</style>Warum dieses Muster funktioniert
CMS-getriebene Layouts können knifflig sein, weil jedes Item dieselbe Klasse teilt. Das heißt, du kannst im Webflow Designer nicht einfach das 3. oder 9. Item anders stylen. (Wenn du Text innerhalb dieser Items einzeln stylen möchtest, haben wir eine Anleitung zum Erstellen von Text-Spans in dynamischen CMS-Textelementen in Webflow.) Aber :nth-child() gibt dir punktgenaue Kontrolle über positionsbasiertes Styling.
In Kombination mit flex-wrap, flex-basis und ein bisschen Mathe kannst du ein Raster bauen, das kuratiert aussieht, selbst wenn es zu 100 % CMS-getrieben ist.
Und weil sich das Muster alle 6 Items wiederholt, funktioniert es reibungslos auch bei langen Listen. Ob du 6, 60 oder 600 Collection Items hast, sie stylen sich weiter selbst wie Profis. Und wenn du einen Blick darauf wirfst: Wir haben die Bilder auf cover gesetzt und die Wrapper-Kinder gestreckt.
Bonus: weitere Einsatzmöglichkeiten für :nth-child()
Die Magie hört bei Rastern nicht auf. :nth-child() ist im Grunde eine Universalfernbedienung fürs Styling nach Reihenfolge.
Hier sind ein paar weitere Knaller:
Jedes 3. Item hervorheben:
.grid .child:nth-child(3n) {
background-color: #f9f9f9;
}Nützlich für Zebrastreifen, versetzte Hintergründe oder einfach, um den Rhythmus zu brechen.
Die ersten n Items anders stylen:
.grid .child:nth-child(-n+3) {
border: 2px solid red;
}Das gibt den ersten drei Items eine VIP-Behandlung. Denk an Featured Posts oder Hero-Karten.
Eine bestimmte Nummer ansprechen:
.grid .child:nth-child(9) {
transform: rotate(2deg);
}Warum? Weil dein 9. Blogbeitrag vielleicht chaotisch neutral ist.
Muster wie diese lassen dich den handgemachten Look vortäuschen, auch wenn der Inhalt vollständig automatisch aus dem CMS kommt. Dein Layout bleibt frisch, ohne dass der Designer zum Albtraum aus Klassennamen wird. Wenn du CMS-Tricks magst, die eine Website individuell wirken lassen, wirf einen Blick auf unsere Beiträge zu CMS-gesteuerten Hintergrundverläufen in Webflow, CMS-gesteuerten Hintergrundvideos mit dem Custom Element und zu einem nativen, CMS-gesteuerten Marquee und Ticker Tape in Webflow.
Und das Beste? Du kannst es in den Custom-Code-Bereich <head> oder <body> deines Projekts einfügen und wie ein Layout-Gott davonspazieren, oder ein Code Embed nutzen und das Styling direkt im Designer sehen.
Probier es aus. Brich das Raster auf. Beeindrucke deine Kundschaft.
Oder nick einfach still vor dich hin, weil du weißt, dass dein 27. Collection Item natürlich volle Breite haben soll.
Hol dir das Cloneable hier.
Weitere kostenlose Templates wie dieses findest du auf unserer Seite mit Webflow Cloneables.
Häufig gestellte Fragen
Was wählt :nth-child(6n+1) in CSS aus?
Es wählt jedes 6. Element ab dem ersten aus: das 1., 7., 13., 19. und so weiter. Das n zählt ab 0 hoch, also ergibt 6n+1 die Werte 1, 7, 13 und so fort. Damit ist es ein guter Startpunkt für ein sich wiederholendes 6er-Layout.
Wie nutzt du nth-child mit einer Webflow Collection List?
Füge eigenes CSS hinzu, das die Klasse deines Collection Items anspricht, mit :nth-child() dahinter, in einem Embed oder in deinem Custom Code. Jedes CMS-Item teilt sich eine Klasse, daher kannst du das 3. oder 9. Item im Designer nicht anders stylen, positionsbasierte Selektoren dagegen schon.
Wie wählst du nur die ersten drei Items einer Liste aus?
Nutze :nth-child(-n+3). Es trifft das 1., 2. und 3. Kind, was praktisch ist für Featured Posts oder Hero-Karten oben in einem CMS-Raster.
Funktioniert ein sich wiederholendes nth-child-Muster mit jeder Anzahl an CMS-Items?
Ja. Weil sich das Muster alle 6 Items wiederholt, funktioniert es bei 6, 60 oder 600 Collection Items. Landet in der letzten Reihe ein einsames Item, kannst du ihm mit :last-child die volle Breite geben.
