flexを使い横並びにした要素の一番下をそろえる

<div class="grid">
  <div class="item">
    <figure class="item-pic"><img src="./img/noimage.webp" alt="no"></figure>
    <div class="item-body">
      <p class="item-ttl">タイトル</p>
      <p class="item-txt">...</p>
    </div>
    <div class="item-btns"><a class="item-btn">ボタン</a></div>
  </div><!-- /.item-->

  <!-- 同じのがあと二つなので省略 -->

</div><!-- /.grid-->

/* ボタンのスタイルなど、説明することのないセレクターは省いています */
/* css変数、padding hack など書いていますが、今回の記事では紹介いたしません */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/*
flex の場合でも可
.flex {
  display: flex;
  gap: 20px; 
  /*
  flex にも gap は使えますが、
  can i use を見てサポートブラウザを確認してから使った方がいいかもです
  */
}
*/

.item {
  --padding: 20px; /* css変数 */
  /* flex: 1; フレックスのときに必要 */
  box-shadow: 0 0 3px rgba(#333, 0.5);
}

.item-pic {
  width: 100%;
  overflow: hidden;
}

.item-pic img {
  aspect-ratio: 2 / 1; /* padding hack の進化系みたいなもの */
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.item-body {
  padding: var(--padding); /* var(css変数)でさっき決めた値が入る */
  line-height: 1.5;

  > * + * { /* これは フクロウセレクタ と呼ばれているものです。 */
    margin-top: 20px;
  }
}

.item-btns {
  padding: var(--padding); /* var(css変数)でさっき決めた値が入る */
}