Displaying photos that fill the grid - regardless of aspect ratio

I am trying to create a photo gallery as a home learning project in react. I am able to display the photos in a grid:

Using this code:

const Container = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
justify-items: center;
align-items: center;
margin: 0;
padding: 0;
`

const PhotoWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* set a fixed height for each grid item */
`

const Photo = styled.img`
max-width: 100%;
max-height: 100%;
object-fit: contain;
height: 100%; /* make the image fill the height of the grid item */
`

const Home = () => {

       return (
        
            <Container>
                {imagesData.map((image) => <PhotoWrapper><Photo src={image.imageUrl} /></PhotoWrapper> )}
            </Container>
           
    )
}

export default Home

That's NEARLY how I want it, but... I want it to be more like Flickr. Who do an AMAZING job at filling the grid without stretching photos (That I can tell).

Example:
https://www.flickr.com/prints/discover

How do they manage to keep the rows the same length, and height? Is there some awesome CSS trick? Or is there maybe a load of backend work to calculate sizes and see what fits? How can I display my grid like that?

Edit: The solution accepted is amazing for what I need. Here's what it looks like for me now:

The only issue is when a small number of photos go onto the last row. The get cropped a lot, ad hard to see what they are. Is there a :last type class that could help this?

A simple solution is to use object-fit and flex-wrap. Note that only a portion of an image will be displayed if it doesn't fit.

First, we need a #gallery with multiple .items:

<div id="gallery">
  <div class="item">
    <img src="https://www.example.com/img.png">
  </div>
  <!-- ... -->
</div>

As the number of images and their width cannot be predicted, we make #gallery a flex-wrap: wrap container.

#gallery {
  display: flex;
  flex-wrap: wrap;
}

We then allow .items to expand as much as they'd like on their row, which has a fixed height of 100px or another value of your choice:

.item {
  flex: 1 1 auto;
  height: 100px;
}

Finally, set object-fit: cover for the images. This, along with height: 100% and width: 100%, ensure that they will always touch two sides and overflow the other two:

.item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Try it:

(The last images might be a bit too wide, since we are displaying a limited number of images, but infiniscroll is normally used to overcome this.)

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

/**
 * Randomly add 15 - 44 images, of which sizes are in range 100 - 499.
**/

const gallery = document.querySelector('#gallery');

const l = 15 + Math.random() * 30 | 0;

for (let i = 0; i < l; i++) {
  const wrapper = document.createElement('div');
  const img = document.createElement('img');
  
  const [width, height] = [0, 0].map(
    _ => 100 + Math.random() * 400 | 0
  );
  
  wrapper.classList.add('item');
  img.src = `https://picsum.photos/${width}/${height}`;
  
  wrapper.appendChild(img);
  gallery.appendChild(wrapper);
}

<!-- language: lang-css -->

#gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.item {
  flex: 1 1 auto;
  display: flex;
  height: 100px;
}

.item img {
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}

body {
  background: #000;
}

<!-- language: lang-html -->

<div id="gallery"></div>

<!-- end snippet -->