Das CMS-Raster durchbrechen: Ein Flexbox CMS-Muster, das sich benutzerdefiniert anfühlt (auch wenn es das nicht ist)

Kennst du das Gefühl, wenn deine Webflow-Sammlungsliste... gut aussieht, aber auch so, als hätte sie von einem Bot erstellt werden können? Das ist vielleicht ein bisschen brutal. Aber die Webflow-Sammlungsliste sieht aus wie Sammlungslisten. Ein Element ist dasselbe wie ein anderes. Sie können Dinge ändern, Sie können die bedingte Formatierung verwenden und etwas ausschalten oder anzeigen. Aber normalerweise ist es ein Link, ein Raster oder eine Liste, und das Layout wiederholt sich. Ja, wir auch. Einheitliche Karten, identische Breiten, wie eine Excel-Tabelle, die versucht, eine Website zu sein.

Aber was wäre, wenn du aus der Monotonie ausbrechen könntest, ohne 15 Kombiklassen zu benötigen oder Sammlungslisten zu duplizieren? Hier kommt der Held dieser Geschichte ins Spiel, der :nth-kind ().

Und heute nutzen wir es nicht nur — wir Looping es, und nicht wie der Straßenmusiker an der Promenade... Was natürlich eine riesige Lüge ist, wir werden es wie ein Straßenmusiker auf der Promenade wiederholen und am Ende geben wir dir ein praktisches Clonable, um das alles einfacher zu machen.

Was ist ein n-tes Kind?

Nun, ein achtes Kind eines achten Kindes wäre ein Zauberer im Quadrat, aber abgesehen davon verwendet das Projekt einen leistungsstarken CSS-Selektor namens:nth-child (), um das standardmäßige Cookie-Cutter-Layout einer Webflow-Sammlungsliste zu durchbrechen. Normalerweise hat jedes CMS-Objekt das gleiche Design — langweilig. Aber mit NTH-Child () können Sie Elemente anhand ihrer Position in der Liste als Ziel auswählen. Zum Beispiel wählt :nth-child (3) das dritte Element aus, :nth-child (2n) schnappt sich jedes gerade Objekt und :nth-child (6n+1) zielt auf jedes 6. +1 Element ab (1., 7., 13. usw.). Wir verwenden dies, um ein Schleifenmuster von Layoutbreiten zu erstellen: volle Breite, halbe Breite, Drittel, zwei Drittel — dann wiederholen wir das. Es funktioniert mit einer beliebigen Anzahl von CMS-Elementen und sorgt dafür, dass Ihr Grid so aussieht, als hätten Sie Stunden damit verbracht, es zu kuratieren... obwohl alles mit Code automatisiert ist.

Allgemeine :NTH-Child () -Muster und was sie bewirken

:nth-kind (3)

👉 Ziele nur der 3. Kind.

Anwendungsfall: Gestalten Sie eine einzelne ausgewählte Karte oder überschreiben Sie manuell ein Element im Layout.

:nth-kind (ungerade)

👉 Ziele jede ungerade Zahl Kind: 1., 3., 5. usw.

Anwendungsfall: Hintergrund mit Zebrastreifen, abwechselnde Polsterung oder Ränder.

:nth-kind (gerade)

👉 Ziele jede gerade Zahl Kind: 2., 4., 6. usw.

Anwendungsfall: Kombiniere es mit seltsamen oder alternativen Stilen zwischen benachbarten Artikeln.

:nth-kind (3n)

👉 Ziele jedes 3. Artikel: 3., 6., 9. usw.

Anwendungsfall: Füge nach jeder dritten Karte in Folge einen Abstand hinzu oder markiere jeden dritten Beitrag in einem Raster.

:ntes Kind (3n+1)

👉 Ziele jeder 3. Artikel ab dem 1.: 1., 4., 7. usw.

Anwendungsfall: Beginnen Sie ein sich wiederholendes Layoutmuster mit 3 Elementen von Anfang an.

:ntes Kind (3n+2)

👉 Ziele jeder 3. Artikel ab dem 2.: 2., 5., 8. usw.

Anwendungsfall: Funktioniert zusammen mit 3n+1 und 3n+3, um 3-Karten-Layout-Loops zu erstellen.

:ntes Kind (-n+3)

👉 Zielt auf die die ersten 3 Artikel nur: 1., 2. und 3.

Anwendungsfall: Geben Sie den ersten Elementen in einem CMS-Grid einen VIP-Style (wie hervorgehobene Beiträge).

:ntes Kind (n+6)

👉 Zielt auf die 6. Artikel und jeder weitere Hit: 6., 7., 8....

Anwendungsfall: Wende das Fallback-Styling oder das Standard-Layout an, sobald dein Heldenbereich mit der Präsentation fertig ist.

:ntes Kind (6n+1)

👉 Ziele jeder 6. + 1 Artikel: 1., 7., 13., 19. usw.

Anwendungsfall: Erstellen Sie ein sich wiederholendes Layoutmuster mit 6 Elementen — perfekt für ein modulares redaktionelles Raster.

: letztes Kind

👉 Zielt auf die letztes Kind, egal wie viele Artikel es gibt.

Anwendungsfall: Stylen Sie den einsamen Nachzügler am Ende so, dass er nicht unangenehm sitzt (wir haben unsere volle Breite gegeben).

Lernen Sie kennen: Flex Loop Pattern 6

Dieses würzige kleine CSS-Layout nutzt die Leistung von Flexbox + :nth-kind () um ein sich wiederholendes Layoutmuster mit 6 Elementen zu erstellen, das sich individuell, redaktionell und rhythmisch anfühlt. Es ist so konzipiert, dass es in Ihr Webflow-CMS-Raster kopiert und eingefügt werden kann.

Was es macht:

• Artikel 1: Volle Breite
• Punkt 2:50%
• Punkt 3:50%
• Artikel 4:33.33%
• Artikel 5:66.66%
• Objekt 6: wird auf Objekt 1 zurückgesetzt und beginnt von vorne

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-gesteuerte Layouts können schwierig sein, da jedes Element dieselbe Klasse hat. Das bedeutet, dass Sie nicht einfach in den Designer von Webflow gehen und anfangen können, das 3. oder 9. Element anders zu gestalten. Aber :nth-kind () gibt Ihnen die Kontrolle über den Laserfokus beim positionsbasierten Styling.

In Kombination mit Flex-Wrap, Flex-Basis und ein bisschen Mathematik kannst du ein Raster erstellen, das sieht aus kuratiert, auch wenn es zu 100% CMS-gesteuert ist.

Und da sich das Muster alle 6 Elemente wiederholt, funktioniert dies problemlos für lange Listen. Egal, ob du 6, 60 oder 600 Kollektionsartikel hast, sie stylen sich wie Profis von selbst. Und wenn du mal nachschaust, haben wir die Bilder für den Einband und die Kinder auf der Verpackung beim Strecken.

Bonus: Andere Verwendungen für :nth-kind ()

Die Magie macht nicht vor Gittern halt. :nth-kind () ist im Grunde eine Universalfernbedienung für das Styling auf Bestellung.

Hier sind noch ein paar andere Knaller:

Markiere jedes 3. Objekt:

.grid .child:nth-child(3n) {
  background-color: #f9f9f9;
}

Nützlich für Zebrastreifen, versetzte Hintergründe oder einfach nur um den Rhythmus zu durchbrechen.

Stylen Sie den ersten n Artikel anders:

.grid .child:nth-child(-n+3) {
  border: 2px solid red;
}

Dadurch erhalten die ersten drei Artikel eine VIP-Behandlung. Denken Sie an besondere Beiträge oder Heldenkarten.

Zielen Sie auf eine bestimmte Zahl ab:

.grid .child:nth-child(9) {
  transform: rotate(2deg);
}

Warum? Weil dein 9. Blogbeitrag vielleicht chaotisch neutral ist.

Mit solchen Mustern können Sie den handgefertigten Look vortäuschen, auch wenn der Inhalt über das CMS vollständig automatisiert ist. So sieht Ihr Layout immer frisch aus, ohne dass der Designer zu einem Albtraum mit Klassenbenennungen wird.

Und das Beste daran? Sie können es in Ihr Projekt einfügen <head> oder <body> Abschnitt mit benutzerdefiniertem Code und geh weg wie ein Layoutgott, oder verwende eine Code-Einbettung und sieh dir das Styling im Designer an.

Probiere es aus. Durchbrich das Netz. Bring deinen Kunden in den Wahnsinn.

Oder nicke dir einfach leise zu, weil du weißt, dass dein 27. Kollektionsartikel angeblich um die volle Breite zu haben. 😎