子要素の中にある複数の孫要素の位置を等間隔に揃える

見出し、画像、ボタンなどが並ぶカード型コンポーネントをスタイリングする時に、display: gridを使用し、子要素の高さを揃えつつ異なる高さの孫要素を等間隔に配置します。

HTML(Pug)

.container
  .box
    p.name name01
    .img
      div(style="height: 210px")
    .button button
  .box
    p.name
      | name02
      br
      | name02
    .img
      div(style="height: 220px")
    .button button
  .box
    p.name
    | name03
    br
    | name03
    br
    | name03
    .img
      div(style="height: 200px")
    .button button

CSS(SCSS)

.container {
  display: flex;
  justify-content: space-between;
  .box {
    border: 1px solid gray;
    box-sizing: border-box;
    display: grid;
    width: 31%;
    text-align: center;
    .name {
      align-self: flex-start;
      margin: 0;
    }
    .img {
      align-self: center;
      margin: 20px 0;
      div {
        background-color: gray;
        width: 90%;
        margin: 0 auto;
      }
    }
    .btn {
      align-self: flex-end;
    }
  }
}