Einführung

Manchmal braucht dein Layout mehr als nur Symmetrie — es braucht eine Struktur, die Hierarchie oder Flow widerspiegelt. In diesem Artikel zeigen wir dir, wie du das erste und letzte Element jeder Reihe in einer Webflow Collection List Grid dynamisch stylen kannst – und deinem UI mit gezielter nth-child-CSS-Logik ein eleganteres, offenes Erscheinungsbild gibst.

Standardmäßig wendet Webflow einheitliches Styling auf alle Collection Items an.

Aber wenn dein Design visuelle Hinweise erfordert – etwa keine linke Rahmenlinie beim ersten Element, keine rechte Linie beim letzten, oder dezente Abstände – dann brauchst du etwas CSS-Logik.

Besonders nützlich ist das bei Blog-Übersichtsseiten oder Card-Layouts, bei denen Inhalte zeilenweise präsentiert werden und du an den Rändern jeder Reihe ein Gefühl von Offenheit erzeugen willst.

Ein kleines Detail – aber eines, das das Design spürbar aufwertet.

Wir gehen von einem 3-Spalten-Grid auf Desktop (≥ 992px) aus, wobei das Standardstyling in Webflow erfolgt.

Die Klasse, die auf jedes Collection Item angewendet wird, lautet: .resource-item.

‍

Das ist unser Ziel:

• Erstes Element jeder Reihe: rechter Rand, kein linker Abstand.
• Mittleres Element: Standard-Webflow-Stil (wird im Designer behandelt).
• Letztes Element jeder Reihe: linker Rand, kein rechter Abstand.

Der Code

<style>
  /* Custom border styling for .resource-item cards in a 3-column layout above 992px */

  @media (min-width: 992px) {
    .resource-item:nth-child(3n + 1) {
      border-right: 1px solid var(--border--border-light-medium);
      padding-left: 0;
    }

    .resource-item:nth-child(3n) {
      border-left: 1px solid var(--border--border-light-medium);
      padding-right: 0;
    }
  }
</style>

‍

Weitere Verbesserungen

• Spaltenanzahl anpassen? Ändern Sie einfach 3n und 3n+1 entsprechend (z. B. 4n, 4n+1 für 4-spaltige Raster).
• Brauchen Sie auch Hover-Styling? Verwenden Sie die Selektoren.resource-item:hover:nth-child (...).

‍