I'm aware there are already answers regarding this question (Insert html after certain amount of posts?). But I haven't managed to find a solutions to my specific problem. The post linked above rely's on inserting html after x amount of posts, x being a set value - my problem is there are an unknown quantity of posts that need wrapping in html tags

for example:

    <div class='grid'>
       <div class='grid__cell'>
           (Output Posts that meet if condition)
       </div> 
       <div class='grid__cell'>
           (Output Posts that meet if condition)
       </div>
       <div class='grid__cell'>
           (Output Posts that meet if condition)
       </div>
   </div>

As you can see from the rough html mock-up above in one loop i need to output posts wrapped inside their relative containers. In this instance the containers represent games and their active state so if a game is set as a previous game it will be placed inside the first container, if it's an active game it will be placed in the second wrapper and if its an up and coming game placed in the final wrapper.

To make things more complicated I couldn't use categories or taxonomies for this i had to use a set of acf radio fields because each user has what's called a sector specific role and each of the four sector roles can show different games which of course are all controlled in the admin allowing the admin to select previous/current/up-and-coming games for each of their sectors.

Currently for the sake of getting it working I just created 3 separate loops and put the wrapper outside of the loop, but I've noticed a decline in TTFB due to the duplicated loop being ran three times ( not to mention any other loops inside those loops ).

I'm looping through a custom post type if that makes any different ( don't think it will but worth noting )

Apologies for the lack of actual code examples in this question.

(this is also my first question so please let me know if i can improve it in anyway)