CSS Flexbox image grid for different sized images

Images define the web and give life to your web page so knowing the art of laying them out on your site is quite useful … sometimes. So in essence, this write up is about creating a simple image gallery or grid for images with different width and height (different aspect ratio) using CSS flexbox. This, however is not about image optimization which looks at byte savings and performance improvements of images for your website.

Our goal is to create a 3 x 3 grid, 2 x 2 grid and stack images vertically for different view port sizes. Doing this, is probably simple when all images are of the same width and height but tricky when the images have different width and height.

from left to right — 3x3 grid for desktops, 2x2 for tablets and vertical layout for mobile

All images used here are from unsplash — a creative commons platform. Images used have varying sizes ranging from landscape-3741 x 2494 px to portrait-4928 x 3264 px.

This is the html markup with <figure> element as container for our images

First, we have .grid-container which will be our flex container and .col which will be our individual flex items (direct children of the flex container). We adapt the mobile first approach here by setting the .grid-container todisplay:flex; flex-wrap:wrap; Flex-wrap set to wrap will cause the flex items to break to the next line within its container when the default width of these flex-items which is set to .col {flex: 100%;} for mobile first, cannot be contained in the container. For mobile first, the flex-container can contain just one flex-item horizontally with the remaining images stacked on top of each other vertically.

We resize all the images by setting a default height: 15.625rem; width: 100%; object-fit: cover; The important take away here is the use of object-fit which cause the images to maintain its aspect-ratio and also fit its container.

images without object-fit set to cover on the left and with object-fit: cover set on the right

For tablet layout we set .col {flex:50%} for min-width: 31.37em // 502px media query. This will gives us 2 x 2 grid of 50% for each flex-item when the screen width is greater or equal to 31.37em.

On desktop layout, we set .col {flex: 33.3333%} for min-width: 48em // 768px. This will gives us 3 x 3 grid of 33.333% for each flex-item when the screen size is greater or equal to 48em. We could have set the .flex: 25% if we want a 4 x 4 grid of 25% each for the flex-items.

To get the best possible look for the images on different screens, set different height property. ie height: 28.125em; for very large desktops.

The CSS markup:

Final words

That will be all for today. I genuinely hope this helps someone out there and a response, an applause and a share will be appreciated.