✪ Creating a Responsive Full Width Image Gallery with HTML and CSS using Flex
Today I started work on the development of an image gallery using HTML and CSS. The gallery was based on a grid of thumbnails. Each image was square, and all were of the same size: 240px x 240px.
These were the requirements:
- The grid was to be "full width". In other words, the thumbnails must expand/contract/wrap to ensure whitespace never appears at the sides of the grid when the browser window is resized.
- The thumbnails are never to grow beyond their original size.
- The thumbnails are never to shrink beyond 50% of their original size.
- The aspect ratio of the thumbnails must be retained.
- All thumbnails are to be shown at the same size.
- The last row is to be left aligned.
I experimented with a few options that made use of flex-grow to dynamically scale the thumbnails to yield a "full width" experience, but in each case, I couldn't find a non-hacky way of preventing the images within a partial last row from growing too large. Here is a CodePen demonstrating the issue.
So instead of using flex-grow I switched to a combination of flex-shrink and media queries; the latter being used to effectively control the number of columns within the grid based on 240px increments. Here is a CodePen with a working demonstration.
And here is the same pen but with the CSS written using SCSS.