My goal is to design a responsive gallery that displays images of various dimensions. I envision having 5 square divs of equal size on a full screen, with each image centered both horizontally and vertically, scaled to fit with some padding that adjusts proportionally according to the window size. The spacing between divs should be consistent both horizontally and vertically, based on a proportional (%) calculation relative to the window size for a clean and organized look. Additionally, there are minimum and maximum sizes for the divs so that when the minimum size in one row is reached, they will be reordered with the last one moving to the next row while maintaining fixed (proportional) spacing.
I wonder if this layout can be achieved using only CSS?
The example that comes closest to what I am looking for can be found here:
<code>http://codepen.io/anon/pen/QGwwEB</code>