Breaking the CMS Grid: A Flexbox CMS Pattern That Feels Custom (Even When It's Not)

You know that feeling when your Webflow Collection List looks... fine, but also like it could have been built by a bot? That might me a bit on the brutal side. But Webflow collection list look like collections lists, One item is the same as another. You can change things, you can use conditional formatting and turn something off, or show it. But usually, it's some link of grid, or list and the layout repeats. Yeah, us too. Uniform cards, identical widths, like an Excel spreadsheet trying to be a website.

But what if you could break out of the monotony without needing 15 combo classes or duplicating Collection Lists? Enter the hero of this story, the :nth-child().

And today, we're not just using it — we’re looping it, and not like that busker at the boardwalk... Which of course is a huge lie, we're gonna be looping it like a busker at the boardwalk, and we're giving you a handy cloneable at the end to make all this easier.

What is a nth-child?

Well a 8th child of a 8th child would be a wizard squared, but that aside, project uses a powerful CSS selector called :nth-child() to break the default, cookie-cutter layout of a Webflow Collection List. Normally, every CMS item gets the same styling — boring. But :nth-child() lets you target items based on their position in the list. For example, :nth-child(3) selects the 3rd item, :nth-child(2n) grabs every even one, and :nth-child(6n+1) targets every 6th + 1 item (1st, 7th, 13th, etc.). We use this to create a looping pattern of layout widths: full-width, half-half, third-two-thirds — then repeat. It works with any number of CMS items and keeps your grid looking like you spent hours curating it… even though it’s all automated with code.

Common :nth-child() Patterns & What They Do

:nth-child(3)

👉 Targets only the 3rd child.

Use case: Style a single featured card or manually override one item in the layout.

:nth-child(odd)

👉 Targets every odd-numbered child: 1st, 3rd, 5th, etc.

Use case: Zebra-striping backgrounds, alternating padding or margins.

:nth-child(even)

👉 Targets every even-numbered child: 2nd, 4th, 6th, etc.

Use case: Pair with odd to alternate styles between adjacent items.

:nth-child(3n)

👉 Targets every 3rd item: 3rd, 6th, 9th, etc.

Use case: Add spacing after every third card in a row or highlight every third post in a grid.

:nth-child(3n+1)

👉 Targets every 3rd item starting from the 1st: 1st, 4th, 7th, etc.

Use case: Start a repeating 3-item layout pattern from the beginning.

:nth-child(3n+2)

👉 Targets every 3rd item starting from the 2nd: 2nd, 5th, 8th, etc.

Use case: Works alongside 3n+1 and 3n+3 to build 3-card layout loops.

:nth-child(-n+3)

👉 Targets the first 3 items only: 1st, 2nd, and 3rd.

Use case: Give the first few items in a CMS grid VIP styling (like featured posts).

:nth-child(n+6)

👉 Targets the 6th item and every one after it: 6th, 7th, 8th…

Use case: Apply fallback styling or default layout once your hero section is done showing off.

:nth-child(6n+1)

👉 Targets every 6th + 1 item: 1st, 7th, 13th, 19th, etc.

Use case: Start a repeating 6-item layout pattern — perfect for a modular editorial grid.

:last-child

👉 Targets the last child, no matter how many items there are.

Use case: Style the lonely straggler at the end so it doesn’t sit awkwardly (we gave ours full width).

Meet: Flex Loop Pattern 6

This spicy little CSS layout uses the power of Flexbox + :nth-child() to create a 6-item repeating layout pattern that feels custom, editorial, and full of rhythm. It’s designed to be copy-pasteable for your Webflow CMS grid.

What it does:

• Item 1: Full-width
• Item 2: 50%
• Item 3: 50%
• Item 4: 33.33%
• Item 5: 66.66%
• Item 6: resets to Item 1 and starts over

Here’s the full code, with comments:

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

Why This Pattern Works

CMS-driven layouts can be tricky because every item shares the same class. That means you can’t just go into Webflow’s Designer and start styling the 3rd or 9th item differently. But :nth-child() gives you laser focus control over position-based styling.

When combined with flex-wrap, flex-basis, and a bit of maths, you can make a grid that looks curated even when it’s 100% CMS-driven.

And because the pattern repeats every 6 items, this works seamlessly for long lists. Whether you’ve got 6, 60, or 600 Collection Items, they’ll keep styling themselves like pros. And if you go look we have the images set to cover and the wrapper children stretching.

Bonus: Other Uses for :nth-child()

The magic doesn’t stop at grids. :nth-child() is basically a universal remote for styling by order.

Here are some other bangers:

Highlight every 3rd item:

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

Useful for zebra-striping, staggered backgrounds, or just breaking the rhythm.

Style the first n items differently:

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

This gives the first three items a VIP treatment. Think featured posts or hero cards.

Target a specific number:

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

Why? Because maybe your 9th blog post is chaotic neutral.

Patterns like this lets you fake the handcrafted look, even when the content is fully automated through the CMS. It keeps your layout looking fresh without the Designer turning into a class-naming nightmare.

And the best part? You can paste it into your project’s <head> or <body> custom code section and walk away like a layout god, or use an code embed and see the styling inside the designer.

Try it out. Break the grid. Blow your client’s mind.

Or just silently nod to yourself because you know that your 27th Collection Item is supposed to be full-width. 😎

Grab the cloneable here.