How to create a grid layout that adapte based on the content height?

Question

I would like to create a grid of two column, and the number of row will depends on the content of each elements.

For example, the first child could be a list of comments, and depending on the product the number of comments will change, so the height too.

I think the css grid could help, but fow now I haven't found a soulution here is what I have. For the purpose of the snippets I have define an height for the blocks inside the css, but in reality it will vary depending on the content.

I've seen the grid-auto-flow that seems to be close to what I want but I'm not sure how to use it.

.wrapper {
  display: grid;
  padding: 2em;
  grid-gap: 15px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
}
.wrapper > div {
  border: red solid 2px;
}


.wrapper > div:nth-child(1) {
height:150px; // I set the height to 150px, but it could be less or more, depends on the content
}

.wrapper > div:nth-child(6) {
height:100px; // I set the height to 100px, but it could be less or more, depends on the content
}

<div class="wrapper">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
  <div>Child 4</div>
  <div>Child 5</div>
  <div>Child 6</div>
  <div>Child 7</div>
</div>

I would like something that can adapt based on the content heigh, for exemple: