如何使跨多个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>