Introduction

Sometimes your layout needs more than symmetry — it needs structure that reflects hierarchy or flow. In this article, we’ll show you how to dynamically style the first and last items in each row of a Webflow Collection List Grid, giving your UI a refined, open-ended look with CSS nth-child logic.

By default, Webflow applies uniform styling across all collection items. But if your design calls for visual cues — for example, no left border on the first card, no right border on the last, and subtle spacing changes — you’ll need a bit of CSS logic. This is especially helpful in blog overview pages or card layouts where content is presented in rows, and you want a sense of openness at the edges of each row. It’s a subtle touch, but one that elevates the design.

Assume a 3-column grid layout for desktop (≥ 992px), and default styling handled in Webflow. The class applied to each Collection Item is .resource-item.

Here’s what we want:

• First item of each row: right border, no left padding.
• Middle item: default Webflow styling (handled in the Designer).
• Last item of each row: left border, no right padding.

The 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>

‍

Further Improvements

• Adjust column count? Just change 3n and 3n+1 to match (e.g. 4n, 4n+1 for 4-column grids).
• Need hover styling too? Use .resource-item:hover:nth-child(...) selectors.

‍