For some reason I’m unable to make the black boxed item 2 appear on the first row along with item 1. Do note if I use flex on container-loop-items class div it generates other problems so I’m trying to figure it out without flex.
Here’s a codepen with the code:
Where should item 3 and item 4 appear?
Can you post a sketch of your desired layout of all the boxes? Also, is this for a desktop view or mobile view?
In my original code theres only space for two items per row but in the codepen actually all the items should be on first row, i will add more items to the pen
They should be responsive that is if theres enough space show all the items possible in the same row
A drawing or sketch of what you want would be worth a 1000 words. Also, you did not explain if this layout is for desktop or mobile.
Okey on it, the sketch is for both mobile and desktop?
for both? the only differnece is that in desktop there should b more space hence more items per row.
heres the sketch for desktop
grey area is page width… im making a mobile one wait me a bit
heres the mobile one
Idon’t know why the items are wrapping even with space 
further tests: even if the direct container has space is not used:
Let me know if there’s anything else that can be helpful