pure css grid with unknown amount of total elements and unknown number of elements in row

Ok so to start with I did searched for this issue first. I may had use wrong query as english is my second language but I did my best to not duplicate.

Ok so let me describe me what I am trying to do. I have an element (lets call it) "A" which contains of plain unordered list of boxes. All boxes are in size that can change because they allign to photo that is inside of them. All boxes also have margin on the right and on the bottom and are set to float left.

Now problem is that all of those boxes are just plain ul elements. And if element "A" can take entire space 5 of this boxes are perfectly in a row. But framework I am using allows people to put other elements next to element "A" which makes its element decrease own width. So if its decreased enough it can no longer contain 5 boxes but only for. I had solution based on n-th child but it does not work if element is resized.

So my question is how can I create grid that will be justified and always have evenly placed boxes regardless of width of the element that contain them? Also I must do this in CSS only and I cannot modify the structure (It must remain unordered list of divs). Any Ideas? I hope I made myself clear enough:) Thanks.