CSS Grid subgridを用いた親グリッドとネストされたカードの完全行同期

CSS Frontend HTML
結論

ネストされた要素に grid-template-rows: subgrid を指定し親の行定義を継承させます。

/* 結論：subgrid によるカード内行同期 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-row: span 3; /* 見出し・本文・ボタンの3行分 */
  grid-template-rows: subgrid; /* 親の行トラックと同期 */
}

subgrid 実装手順

  1. 全体の親要素に display: grid を指定する
  2. カードコンポーネント .card に display: grid と grid-row: span 3 を指定する
  3. .card に grid-template-rows: subgrid を設定し、子要素（タイトル・本文・ボタン）の位置を完全一致させる