Is it possible to implement a Flickr-like justified gallery in pure CSS?

Question

I've been using miromannino.github.io as gallery layout for a few pages and recently I've been trying to figure out if it's possible to do this in raw CSS, potentially with flexbox.

The problem is in the varying horizontal and vertical pictures and that they should always fill 100% of the container width. The closest I got was:

.jgal {
  max-width: 90vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0 auto;
  align-items: flex-start;
}

.jgalimg {
  display: block;
  align-self: flex-start;
  max-height: 40vh;
  max-width: 100vw;
  width: auto;
  height: auto;
}

on a layout like:

<div class="jgal">
    <a class="jgallink" href="url-to-img.jpg">
        <img class="jgalimg hor" src="url-to-thumb.jpg" width="640" height="480" />
    </a>
    <a class="jgallink" href="url-to-img-2.jpg">
        <img class="jgalimg ver" src="url-to-thumb-2.jpg" width="480" height="640" />
    </a>
    [ ... ]
</div>

I have the sizes and the orientation as class. I've tried using

align-content: stretch;
align-items: stretch;

but then aligning the image size to the a tag becomes tricky.

So, any ideas? :)

Answer 1

Although the question is more than a year old, I was trying to work out the same thing recently and I came up with the following fully responsive CSS-only Flickr-like justified gallery solution:

.jg {
  display: flex;
  flex-wrap: wrap;
}

.jg > a, .jg::after {
  --ratio: calc(var(--w) / var(--h));
  --row-height: 9rem;
  flex-basis: calc(var(--ratio) * var(--row-height));
}

.jg > a {
  margin: 0.25rem;
  flex-grow: calc(var(--ratio) * 100);
}

.jg::after {
  --w: 2;
  --h: 1;
  content: '';
  flex-grow: 1000000;
}

.jg > a > img {
  display: block;
  width: 100%;  
}

<div class="jg">

  <a href="#" style="--w: 200; --h: 300">
    <img src="http://via.placeholder.com/200x300">
  </a>
  <a href="#" style="--w: 300; --h: 200">
    <img src="http://via.placeholder.com/300x200">
  </a>
  <a href="#" style="--w: 500; --h: 400">
    <img src="http://via.placeholder.com/500x400">
  </a>
  <a href="#" style="--w: 300; --h: 300">
    <img src="http://via.placeholder.com/300x300">
  </a>
  <a href="#" style="--w: 300; --h: 400">
    <img src="http://via.placeholder.com/300x400">
  </a>
  <a href="#" style="--w: 400; --h: 300">
    <img src="http://via.placeholder.com/400x300">
  </a>
  <a href="#" style="--w: 200; --h: 300">
    <img src="http://via.placeholder.com/200x300">
  </a>
  <a href="#" style="--w: 400; --h: 300">
    <img src="http://via.placeholder.com/400x300">
  </a>
  <a href="#" style="--w: 300; --h: 500">
    <img src="http://via.placeholder.com/300x500">
  </a>

</div>