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?

1 Answer 1


In a responsive mindset, you definitely need to favor flexibility over precise control. Especially in your case since you don't seem to be able to predict the number of images in your grid.

In my opinion, your current breakpoints work really well. A good way to improve the feeling of that “widow” image would be to set your gallery container to text-align: center. This would make the last image(s) to always be centered, thus feeling more balanced and solid:

Image alignment example

  • I think choosing between the two depends. The first one gives the impression that the user can add more content. The second feels like it's "fixed".
    – Pithikos
    Commented May 27, 2020 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.