Как сделать строки в нескольких столбцах CSS3 одинаковой высоты?

Question

Я пытаюсь изучить сетку CSS, у меня есть вложенная сетка CSS, в которой родительский контейнер сетки CSS имеет несколько столбцов, каждый из которых имеет 4 строки, и я хочу, чтобы строки были равны друг другу, например, высота первойстрока в первом столбце равна строке во втором столбце.

#product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  justify-items: center;
  padding: 1em;
}

#product-grid img {
  width: 100%;
  height: 291px;
}

.product-item {
  display: grid;
  /* grid-auto-rows:1fr;  */
  grid-template-rows: 70px, 100px, 200px, 100px;
  border-style: solid;
  border-color: #2c4251;
  border-width: 1px;
  border-radius: 5px;
  padding: 1em;
}

.cntnt {
  text-align: justify;
  overflow: hidden;
}

.product-item {}

.more {
  text-align: left;
  align-self: end;
}

.ttl {
  margin-top: 20px;
  text-align: center;
  align-self: flex-start;
}

<div id="product-grid">
  <div class='product-item'>
    <img src=imgs/1.png>
    <div class='ttl'>this is test title</div>
    <div class='cntnt'>this is test caption</div>
    <div class='more'>
      <div><a href=/view.php?pid=1>more </a></div>
    </div>
  </div>
  <div class='product-item'><img src=imgs/2.jpg>
    <div class='ttl'>title</div>
    <div class='cntnt'>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores, inventore? Officia perferendis</div>
    <div class='more'>
      <div><a href=/view.php?pid=2>more </a></div>
    </div>
  </div>
</div>