CSS based miniature gallery-like code guidelines

A brief guideline to editing and making a miniature CSS gallery-like display for an array of images that is ideal for flex based layouts on personal websites.

I am a huge fan of solaria's gallery code for mini image displays of something that doesn't need a dedicated display. I love how it can stack and align images in rows with minimal effort. Their baseline code and concept is a perfect place to start and recommend reading that page before this one.

However, I ran into flex problems with my layout, mobile display, and issues with small images being stretched or stacked oddly. Their code is excellent for thumbnails to perhaps images taken from a camera and share the same resolution in approximation. If you use it beyond that, you will begin to feel the issue. I keep using the damn thing for full size image previews and visual clustering of examples of something. I do it like this to avoid needing to have height/width attached to every image. Nor having to create a special div for every image type or size. I also wanted things to auto stack or create rows. solaria's code comes remarkably close to doing it. Thus my fondness.

Their baseline,

.gallery {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} 
.gallery img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid darkolivegreen;
  background: yellowgreen;
  margin: 2px;
}

Here's my full changes,

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.gallery img {
    display: block;
    margin: 0;
    max-height: 130px;
    max-width: 100%;
    height: auto;
    width: auto;
    border: 2px solid var(--gallery-border);
    border-radius: 2px;
}

Their main complaint was: "not all of my source images are square however, so I use object-fit: cover; to crop the image without squishing their dimensions". One of my dilemmas was tiny images being widened to 100px or pulling them if they have funky shapes like 200x30.

These are the same part of this code causing it. You solve both things at once by simply not trapping 100px into these parameters. It's working against them to define the pixel shapes and then undo the shape restriction with object-fit. Which causes any odd shaped images to also suffer.

You can literally avoid this problem entirely with my update and no longer have that squishy dimension thing:

.gallery img {
    max-height: 130px;
    width: auto;
    height: auto;
    max-width: 100%;
}

This lets the images keep their natural aspect ratios and not get any taller than 130px and no wider than the container. Stop trying to control the images with an iron fist in the code. Instead, focus on making them have a uniform maximum height. Then let them adjust in that soft limit naturally.

Another thing I changed was margin to gap. Their's is margin: 2px to my,

.gallery {
  gap: 4px;
}
.gallery img {
  margin: 0;
}

I did this because it's nearly the same thing but lets me have more control with flex based layouts. It's far cleaner if you're having any spacing or edge awkwardness. Margin will control every image individually. But gap will control the div itself and keep all images under one rule. Margin lets images have more independence. Since we're optimizing for images of a fuller range of sizes, that freedom is bad to cause odd shaped or wide ones to do unexpected things.

I also added display: block; in order to control spacing under images in stacked rows because images are inline elements.

The final thing I changed was adding align-items: center;. This was because of my other width and height changes. Because I removed the fixed width, it's now pulling the space of the parent. This addition helps vertically align images to each flex row. This matters most of all in images with different heights. It helps with looking uneven too.

When applying my changes, my mobile code was just this because my flex layouts cover the rest.

.gallery img {
    height: auto;
    max-width: 45%;
  }

Examples of usages

All of this is my finished code. No changes per example. If anything isn't looking good, it's in your layout itself holding the div.