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 be a bit on the brutal side. But Webflow Collection Lists look like Collection 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 kind 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() selector. If you searched for how nth child css works and landed here, you're in the right place, and it works in Webflow too.

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 an nth-child?

Well, an 8th child of an 8th child would be a wizard squared, but that aside, this 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 and 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 and :nth-child() to create a 6-item repeating layout pattern that feels custom, editorial, and full of rhythm. It’s designed to be copy-and-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: no rule of its own (the loop starts over at Item 7, which gets the Item 1 treatment)

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. (If you want to style text inside those items individually, we have a how-to on creating text spans in dynamic CMS text elements in Webflow.) 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 smoothly for long lists. Whether you’ve got 6, 60, or 600 Collection Items, they’ll keep styling themselves like pros. And if you go and 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 let 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. If you like CMS tricks that make a site feel custom, have a look at our posts on CMS-powered background gradients in Webflow, CMS-powered background videos using the Custom Element and a native Webflow CMS-powered marquee and ticker tape.

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

More free templates like this one live on our Webflow cloneables page.

Frequently asked questions

What does :nth-child(6n+1) select in CSS?

It selects every 6th element starting from the first: the 1st, 7th, 13th, 19th and so on. The n counts up from 0, so 6n+1 gives you 1, 7, 13 and onwards, which makes it a good starting point for a repeating 6-item layout.

How do you use nth-child with a Webflow Collection List?

Add custom CSS that targets the class on your Collection Item, with :nth-child() after it, in an embed or in your custom code. Every CMS item shares one class, so you can't style the 3rd or 9th item differently in the Designer, but position-based selectors can.

How do you select only the first three items in a list?

Use :nth-child(-n+3). It matches the 1st, 2nd and 3rd child, which is handy for featured posts or hero cards at the top of a CMS grid.

Does a repeating nth-child pattern work with any number of CMS items?

Yes. Because the pattern repeats every 6 items, it works for 6, 60 or 600 Collection Items. If the last row ends up with a lonely item, :last-child lets you give it full width.