[css]要素を縦並びにして高さを揃える例

内容に準じて高さを揃えるやつ。

こんな感じ

<div class="parent">
    <div class="child"><div class="inner">...</div></div>
    <div class="child"><div class="inner">...</div></div>
    <div class="child"><div class="inner">...</div></div>
    <div class="child"><div class="inner">...</div></div>
    <div class="child"><div class="inner">...</div></div>
    <div class="child"><div class="inner">...</div></div>
</div>

.parent{
    display: grid;
    grid-template-rows: 1fr;
    .child{
        display: grid;
        align-items: center;
    }
}

高さを揃えつつ、ついでに縦の中央配置をするならこんな感じで。

高さを揃えるだけなら親要素のgrid部分で解決するんだけど、子要素のレイアウトがちょっと難しい。

多分一番ややこしいのが子要素内の縦の中央配置で、gridとかflexで指定することになる。
この中身をラッピング（.inner）しないと、例えばインライン要素が入ってたときに巻き込まれて改行されたりして不具合が発生する。DOM要素を最低限にしたいときにモヤモヤするのだけど、これは最低限必要。