How to make images in a CSS Grid lay next to each other and jump to another row when lacking space

Question

I'm trying to position images the way shown in the picture using CSS Grid and I can't find a right solution.

Right now I'm simply changing the grid flow to column, but the grid elements don't jump to another row when they meet the end of the container - they resize it and stay in the same, first row.

I tried to use grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) - it solves this jump to another line issue, but it gives all the elements a fixed width whereas some images are not that wide. It creates empty holes between images which I'd like to avoid.

Any ideas on how to accomplish it?

wrong solution 1

Code from the image above:

container {
            display: grid;
            grid-gap: 1rem;
            grid-auto-flow: column;
        }
photo { // all container's elements have this class
            height: 10rem;
            width: auto;
        }

wrong solution 2

Code from the image above:

container {
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        }

photo {
         height: 10rem;
         max-width: 100%;
      }

Answer 1

You see, this is tusk for flex, not for grid. Using grid means columns with same width on each row. No need here at all.

html {
  font-size: 10px;
}
.conteiner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.photo {
  height: 10rem;
  margin: 0 1rem 1rem 0;
}
.photo img {
  width: auto;
  height: 100%;
}

<div class="conteiner">
  <div class="photo"><img src="https://via.placeholder.com/500x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/300x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/200x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/400x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/500x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/300x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/200x200"></div>
</div>

Although I'm using Justified gallery jQuery plugin, if I wand all images in each row to fill all the width.