Just to let you guys know I’ve chosen a non-WP route to achieve this. To be honest I found using the loop in such a complex design rather difficult – not impossible, but very messy. I found using TXP to achieve the same result 100 times faster – you still need to understand the structure and such, but it manages the content so much faster and management is a helluva lot easier.
I still use WP for my blog, which I love it for – out of the box blogging breeze, but for something more complex I find it confusing that people still recommend WP as CMS and suggest it’s easy when it isn’t.
My suggestion would be if you want to stick with WP, create the css first – get that on the screen and then start adding the loop one section at a time. Get one part of the loop working properly. Go one box at a time. Start with one box, and get the loop running in that. Then start on a second box with a second loop, get that working alongside the first loop. And so on.
I spent months with WP in this regard with little result but a css design and that was thanks to Root, who’s also helped me build the structural template. Here’s my WIP so far in TXP. I’m sure some clever folks could do this in seconds in WP but I found this path easier. The site is still WIP but it took me less than a week to get up and running, building templates css etc. https://www.sekhu.net/txpattern/
One the loop becomes easier to understand so anyone can use it fluidly is when creating multiple blocks of individual content will become easier I think. Slow but surely.