User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
up vote 2 down vote accepted

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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