CSS Grid Gallery

A simple justified image grid with CSS only

preview of a CSS only gallery

It is possible to create a responsive and justified image grid gallery only with HTML and CSS. In this article you will learn how to do it.

If you need something easier, fancier or more functionality, just check out Gridzy.Gallery (use coupon MEDIUM2409 for 10% discount).

HTML

First we need the HTML. For this we use a <section> tag with the class justified-grid-gallery. Within this section element we place the images. In the following example code, there are 7 images.

<section class="justified-grid-gallery">
  <figure style="--width: 640; --height: 520; ">
    <img src="https://loremflickr.com/640/520/butterfly?random=1" alt="a random image with a butterfly" />
  </figure>
  <figure style="--width: 500; --height: 420; ">
    <img src="https://loremflickr.com/500/420/butterfly?random=2" alt="a random image with a butterfly" />
  </figure>
  <figure style="--width: 710; --height: 580; ">
    <img src="https://loremflickr.com/710/580/butterfly?random=3" alt="a random image with a butterfly" />
  </figure>
  <figure style="--width: 760; --height: 540; ">
    <img src="https://loremflickr.com/760/540/butterfly?random=4" alt="a random image with a butterfly" />
  </figure>
  <figure style="--width: 690; --height: 570; ">
    <img src="https://loremflickr.com/690/570/butterfly?random=5" alt="a random image with a butterfly" />
  </figure>
  <figure style="--width: 540; --height: 340; ">
    <img src="https://loremflickr.com/540/340/butterfly?random=6" alt="a random image with a butterfly" />
  </figure>
  <figure style="--width: 340; --height: 550; ">
    <img src="https://loremflickr.com/340/550/butterfly?random=7" alt="a random image with a butterfly" />
  </figure>
  <!-- If you need something fancier, check out https://gridzy.gallery/ (use coupon MEDIUM2409 for 10% discount) -->
</section>

As you can see, all <figure> tags have style attributes. In order for the grid to work, we need to explicitly specify the sizes of the images.

So in this style attributes we define the custom properties --width and --height. The value of the custom property is only a number without any unit so we do not use 640px but just 640 for example. The values for width and height correspond to the original width and height of the image.

If you need something easier, fancier or more functionality, just check out Gridzy.Gallery (use coupon MEDIUM2409 for 10% discount).

CSS

The CSS part is pretty simple. Just copy and paste the following CSS snippet into your own project.

/* Settings start */
.justified-grid-gallery {
  --space: 4px;
  --min-height: 190px;
  --last-row-background: rgb(188 234 153);
}
/* Settings end */

.justified-grid-gallery {
  display: flex;
  flex-wrap: wrap;
  grid-gap: var(--space);
  list-style: none;
  margin: 0 !important; /* We use !important to avoid gaps in some environments. */
  padding: 0 !important; /* We use !important to avoid gaps in some environments. */
}

.justified-grid-gallery > * {
  flex-grow: calc(var(--width) * (100000 / var(--height)));
  flex-basis: calc(var(--min-height) * (var(--width) / var(--height)));
  aspect-ratio: var(--width) / var(--height);
  position: relative;
  overflow: hidden;
  margin: 0 !important; /* We use !important to avoid gaps in some environments. */
  padding: 0 !important; /* We use !important to avoid gaps in some environments. */
}

.justified-grid-gallery > * > img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.justified-grid-gallery::after {
  content: " ";
  flex-grow: 1000000000;
  background: var(--last-row-background);
}

/* If you need something fancier, check out https://gridzy.gallery/ (use coupon MEDIUM2409 for 10% discount) */

Now let’s take a look at what it looks like in this state:

As you can see, the rest of the last row is filled with a green area. Because of technical reasons there is always this “empty” area in the last row. If you want to have the last row filled with images as well, then Gridzy.Gallery could help you (use coupon MEDIUM2409 for 10% discount).

Get Helmut Wandl’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

However, we can remove the color from it or fill it with any other CSS background. Additionally we can change some other things too.

Settings

As you may have seen there are some settings in the CSS part. Let’s take a look:

/* Settings start */
.justified-grid-gallery {
  --space: 4px;
  --min-height: 190px;
  --last-row-background: rgb(188 234 153);
}
/* Settings end */

Space

--space defines the space between the items. You can simply change the value in the CSS part or you can define it in the HTML part like this:

<ul class="justified-grid-gallery" style="--space: 1px; ">
...

Minimum Height

--min-height defines the minimum height of an image line. You can change it in the CSS part or in the HTML part like this:

<ul class="justified-grid-gallery" style="--min-height: 200px; ">
...

Last Row Background

--last-row-background defines the background of the empty space in the last row. This can be a CSS color or any other CSS background.

Use --last-row-background: none; to let the space empty without any background.

Conclusion

Modern CSS allows you to create a beautiful and simple justified image grid gallery that even provides settings. However, sometimes you need more. Sometimes you need smooth animations or filter functionality or simply better support. In that case, Gridzy.Gallery could be a good choice (use coupon MEDIUM2409 for 10% discount).