CSS grid set each cell size to its content's height

Question

Hi iam trying to achieve this kind of stlye ->

But my code keeps the card rows seperted. meaning the row is taking its biggest elements height and putting it in all of its cells. so i get this kind of style ->

How can i make all the cells have its contents height?

here is my code ->

.testimonial__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: minmax(min-content, max-content);
  align-items: start;
  gap: 3.5rem;
}

.testimonial__box {
  padding: 2rem;
  padding:  22px;
  box-shadow: 0 20px 30px 10px rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  background-color: #fff;
}

<section class="testimonial">
      <div class="container">
        <div class="testimonial__container"> <!-- Grid Container -->
        
          <!-- Testimonial card -->
          <div class="testimonial__box"> <!-- Grid Items / CARD -->
            <div class="testimonial__box-rating margin-btm-sm">
              <i class="fa-solid fa-star testimonial__star-rating"></i>
              <i class="fa-solid fa-star testimonial__star-rating"></i>
              <i class="fa-solid fa-star testimonial__star-rating"></i>
              <i class="fa-solid fa-star testimonial__star-rating"></i>
              <i class="fa-solid fa-star testimonial__star-rating"></i>
            </div>
            <div class="testimonial__box-text">
              <p class="primary-text">
                "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam obcaecati adipisci
                labore reiciendis aperiam provident debitis laborum exerc"
              </p>
            </div>
            <div class="testimonial__box-user">
              <div class="testimonial__box-user__avatar">
                <img src="img/testimonial/avatar-1.jpg" alt="" />
              </div>
              <div class="testimonial__box-user__text">
                <!-- <div class="testimonial__box-user__text-name"> -->
                <p class="tertiary-text">Scott King</p>
                <!-- </div> -->
                <div class="testimonial__box-user__verification">
                  <i class="fa-solid fa-check testimonial__verified-icon"></i>
                  <span>Verified customer</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Testimonial card -->
        </div>
      </div>
    </section>