subgridを使って子要素の高さを合わせる

「flex」を使っても子要素の高さを合わせるのは難しいです。
「gird」と「subgrid」を使って、子要素の高さを合わせてみます。

See the Pen
Untitled by mikisekikawa (@_mi)
on CodePen.

html

<ul class="card">
  <li> 
    <h2 class="card__hdg">見出し見出し見出し</h2>
    <div class="card__image"> <img src="https://placehold.jp/600x400.png" alt=""></div>
    <p class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p class="card__tag">タグエリア</p>
  </li>
  <li> 
    <h2 class="card__hdg">見出し見出し見出し見出し見出し見出し見出し見出し見出し</h2>
    <div class="card__image"> <img src="https://placehold.jp/600x400.png" alt=""></div>
    <p class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
  <li> 
    <h2 class="card__hdg">見出し見出し見出し見出し見出し見出し見出し見出し見出し</h2>
    <div class="card__image"> <img src="https://placehold.jp/600x400.png" alt=""></div>
    <p class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p class="card__tag">タグエリアタグエリアタグエリアタグエリアタグエリアタグエリアタグエリアタグエリア</p>
  </li>
  <li> 
    <h2 class="card__hdg">見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し</h2>
    <div class="card__image"> <img src="https://placehold.jp/600x400.png" alt=""></div>
    <p class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p class="card__tag">タグエリア</p>
  </li>
  <li> 
    <h2 class="card__hdg">見出し見出し見出し見出し見出し見出し</h2>
    <div class="card__image"> <img src="https://placehold.jp/600x400.png" alt=""></div>
    <p class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p class="card__tag">タグエリアタグエリアタグエリアタグエリア</p>
  </li>
</ul>

css

.card {
	margin: 50px 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;

	> li {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 10px;
	}
}

親要素に「display: grid」を指定し、「grid-template-columns」3カラムにしてみました。
次に子要素に「display: grid」と「grid-template-rows: subgrid」を指定します。

「grid」の中で「grid」をかけるんですね、、

「grid-row: span 4」で列の個数を指定します。
この場合は「見出し」「画像」「テキスト」「タグエリア」の4つです。

「row-gap: 10px」で列の余白を指定して終わりです。