CSSグリッドレイアウトの同じ高さの行
各行はその要素を収めるために必要な最小の高さにしかなれないため、Flexboxを使用してこれを達成することは不可能であると私は思いますが、これは新しいCSSグリッドを使用して達成できますか？
明確にするために、各行ごとではなく、すべての行にまたがるグリッド内のすべての要素に対して同じ高さが必要です。基本的に、最も高い「セル」は、その行のセルだけでなく、すべてのセルの高さを指定する必要があります。
短い答え
目標が同じ高さの行を持つグリッドを作成することである場合、グリッドの最も高いセルがすべての行の高さを設定する場合、これは素早く簡単な解決策です。
- コンテナを
grid-auto-rows: 1frに設定します
使い方
グリッドレイアウトは、グリッドコンテナに柔軟な長さを設定するための単位を提供します。これが fr 単位です。これはコンテナ内の空きスペースを分配するように設計されており、flexboxのflex-growプロパティにいくぶん似ています。
グリッドコンテナのすべての行を1frに設定した場合、次のようにしましょう。
grid-auto-rows: 1fr;
...すべての行が同じ高さになります。
frは空き領域を分配することになっているので、実際には意味がありません。また、複数の行の高さが異なるコンテンツがある場合、スペースが分散されると、それに比例して一部の行が小さくなり高くなります。
グリッド仕様の奥深くに埋め込まれたを除いて、この小さなナゲットは：
...
利用可能なスペースが無限大の場合（グリッドコンテナの幅または高さが不明確な場合に発生します）、フレックスサイズ（
fr）のグリッドトラックは、それぞれの比率を維持しながら、内容に合わせてサイズ変更されます。各フレックスサイズグリッドトラックの使用サイズは、各フレックスサイズグリッドトラックの
max-contentサイズを決定し、そのサイズをそれぞれのフレックスファクタで割って「仮想の1frサイズ」を決定することによって計算される。それらの最大値は、解決された
1frの長さ（フレックス比率）として使用され、それから各グリッドトラックのフレックスファクタが乗算されて最終サイズが決定されます。
したがって、これを正しく読んでいる場合、動的にサイズ変更されたグリッド（高さが不明確など）を扱うときは、グリッドトラック（この場合は行）のサイズは変更されません。
各行の高さは、最も高い（ max-content ）グリッド項目によって決まります。
それらの行の最大の高さは1frの長さになります。
それが1frがグリッドコンテナに同じ高さの行を作成する方法です。
Flexboxが選択肢にならない理由
質問で述べたように、同じ高さの行はflexboxでは不可能です。
フレックスアイテムは、同じ行で同じ高さにすることができますが、複数行にまたがることはできません。
この動作はflexboxの仕様で定義されています。
複数行のフレックスコンテナでは、各行のクロスサイズは、その行にフレックスアイテムを含めるために必要な最小サイズです。
つまり、行ベースのフレックスコンテナに複数の行がある場合、各行の高さ（「クロスサイズ」）はその行にフレックスアイテムを含めるために必要な最小の高さになります。
簡単な答えは、グリッドコンテナにgrid-auto-rows: 1fr;を設定すると、求められたことが解決されるということです。
grid-template-rowsにパーセンテージを使うことができます
grid-template-rows: 50% 50%;