I want to create an image gallery where there are multiple series of images, and each series usually consists of 4, 6 or 8 images. Normally, the images are 200px wide with margin included plus there's a 40px margin of the container. I want to use a responsive layout where images can get a little smaller or larger to make everything look good. (By larger I mean either physically larger or use a little bit of extra margin between images.)
How to handle 340-480px resolutions: use two columns, images are 150-220px size, this is good. How to handle 640-920px resolutions: use four columns, images are 150-220px size, this is good.
What about the middle? If I allow 3 columns, then 480-640px resolutions would cause 147-200px sizes, this would be good, but in series of 4 images, there would be a line with 3 images, followed by a line with only 1 image. I think that looks ugly (I would call it a widow, but I'm not sure about that word in this context). If I use two columns for this resolution, image sizes would be 220-300px. That's a bit too large. Not to mention what if a series contains 3, 5 or 7 images.
Is there any guidance about setting up breakpoints and number of columns in case of a dynamic number of items in order for them to look nice in all possible resolutions?