How can I make a dynamic CSS Grid where the height depends of the image?

Question

I am trying to build a grid where the heights vary in each image (or may be the same), but the images stack on one another like a masonry style grid. Below is an example image of what I am trying to do.

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 1rem;
}

.grid img {
  width: 100%;
}

<section class="grid">
    <img src="https://picsum.photos/300/500" alt="">
  <img src="https://picsum.photos/300" alt="">
  <img src="https://picsum.photos/300/500" alt="">
  <img src="https://picsum.photos/300" alt="">
  <img src="https://picsum.photos/300/500" alt="">
 </section>