Different row height fits to content in one div with display grid

Question

.div__masonry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 20px;
    grid-auto-flow: dense;
    grid-auto-rows: min-content;
}

.div__title{
  grid-column: 1 / 5;
  grid-row: 1;
}

.card{
  background: #f8f8f8;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.card:nth-child(2) {
  grid-column: 1 / 5;
  // grid-row: 2;
}

.card:nth-child(3) {
  grid-column: 5 / 9;
  // grid-row: 1;
}

.card:nth-child(4) {
  grid-column: 2 / 5;
  // grid-row: 3;
}

.card:nth-child(5) {
  grid-column: 5 / 8;
  // grid-row: 2;
}

.card:nth-child(6) {
  grid-column: 8 / 11;
  // grid-row: 2;
}

<div class="div__masonry">

<h3 class="div__title">Lorem ipsum dolor sit amet</h3>

  <div class="card">
      <div class="card__title-wrap">
          <h2 class="red-text card__number">Lorem ipsum dolor sit amet</h2>
          <h4 class="t-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non </h4>
      </div>
  </div>
  
  <div class="card">
      <div class="card__title-wrap">
          <h2 class="red-text card__number">Lorem ipsum dolor sit amet</h2>
          <h4 class="t-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</h4>
      </div>
  </div>
  
  <div class="card">
      <div class="card__title-wrap">
          <h2 class="red-text card__number">Lorem ipsum dolor sit amet</h2>
          <h4 class="t-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h4>
      </div>
  </div>
  
  <div class="card">
      <div class="card__title-wrap">
          <h2 class="red-text card__number">Lorem ipsum dolor sit amet</h2>
          <h4 class="t-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</h4>
      </div>
  </div>
  
  <div class="card">
      <div class="card__title-wrap">
          <h2 class="red-text card__number">Lorem ipsum dolor sit amet</h2>
          <h4 class="t-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</h4>
      </div>
  </div>

</div>

So, as you can see in the code example (better to watch on full page) cards are on the full height of row and i want it to be like in image. In my case cards should have different height and fit to content. Also in my design example perfectly looks 10 columns, but the problem with rows, because there can added different content and i don't want to have a big white space on the card bottom.

P.s. Card will be added through loop, so if it's possible i would like to have it in one div with display grid (of course if it's possible)