I have my own website, and on it I have a Gallery page ([My Gallery Page] - (http://www.iamadandy.com/iamadandy/gallery.html) - click here). The page looks just fine in Chrome and Firefox, however, the images are too close together in Microsoft Edge. I suspect that it’s due to justify-content: space-evenly; in my CSS Flexbox I am using to display the images in the gallery. I tried using CSS @supports to be able to add padding to the images for Edge only, since it’s unnecessary in Chrome and Firefox:
Just as I suspected! Others are seeing fewer images per row than I am, so, basically, somehow I am seeing more images per row than I should for reasons that I cannot understand (I still suspect that Edge has a funky relationship with justify-content: space-evenly within the CSS Flexbox)
I mean, I see 12 images per row.
The number of images you see in a row is going to be controlled by how wide the gallery is. You dont lock the width of the gallery to a fixed number, you fix it to 50%, so…for me, my 50% is 1258.67 pixels, and your images are 100x100, so… 12 fit in the row.
What @PaulOB said. You can’t expect to see the same # of images/row in every screen size and different browser widths. The larger your screen size, the more width you’re going to get, so more images are going to appear per row.
I think it would be same if your screen was tall (height). You will have more images per column appearing
Wildly discouraging… I really don’t know what to do other than to “punish” all users with correct-looking gallery images with margins or padding, but, meanwhile, I tried this solution from within the React component class that paints the gallery in the first place: