Breaking the CMS Grid: A Flexbox Pattern That Doesn't Follow The Collection List

This project uses a clever little CSS trick called :nth-child() to break the usual boring CMS grid layout. Instead of every Collection Item looking the same, this layout makes your grid feel designed, not just data-driven. Drop it into your project and play with the code to make your content look custom — without the headache.

Full blog post on Milk Moon Studio


  /* ===============================
     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%;
  }