回答:
目的が同じ高さの行を持つグリッドを作成することであり、グリッド内の最も高いセルがすべての行の高さを設定する場合、ここにすばやく簡単な解決策があります。
grid-auto-rows: 1fr
グリッドレイアウトは、グリッドコンテナーでフレキシブルな長さを確立するためのユニットを提供します。これがfr
単位です。これは、コンテナー内の空きスペースを分散するように設計されておりflex-grow
、フレックスボックスのプロパティにいくらか類似しています。
グリッドコンテナーのすべての行をに設定した場合、次の1fr
ように言ってみましょう。
grid-auto-rows: 1fr;
...その後、すべての行が同じ高さになります。
fr
は空きスペースを配布することになっているため、そのままでは意味がありません。また、複数の行に高さが異なるコンテンツがある場合、スペースが分散されると、一部の行はそれに比例して小さくなり、背が高くなります。
を除いて、グリッド仕様の奥深くに埋め込まれているのはこの小さなナゲットです。
...
使用可能なスペースが無限の場合(グリッドコンテナーの幅または高さが不明確な場合に発生します)、フレックスサイズ(
fr
)のグリッドトラックは、それぞれの比率を維持しながらコンテンツに合わせてサイズ変更されます。各フレックスサイズのグリッドトラックの使用サイズは、各フレックスサイズのグリッドトラックの
max-content
サイズを決定し、そのサイズをそれぞれのフレックスファクターで割って「仮想1fr
サイズ」を決定することによって計算されます。それらの最大値は、解決
1fr
された長さ(フレックス分数)として使用され、各グリッドトラックのフレックスファクターが乗算されて、最終的なサイズが決定されます。
したがって、これを正しく読んでいる場合、動的にサイズ変更されるグリッド(たとえば、高さが不明確)を処理する場合、グリッドトラック(この場合は行)はそのコンテンツに合わせてサイズ変更されます。
各行の高さは、最も高い(max-content
)グリッド項目によって決定されます。
これらの行の最大の高さがの長さになり1fr
ます。
これ1fr
が、グリッドコンテナーに同じ高さの行を作成する方法です。
質問で述べたように、フレックスボックスでは同じ高さの行は使用できません。
フレックスアイテムは、同じ行で同じ高さにすることができますが、複数の行にわたってはできません。
この動作はフレックスボックスの仕様で定義されています:
複数行のflexコンテナでは、各行のクロスサイズは、行にflexアイテムを含めるために必要な最小サイズです。
つまり、行ベースのフレックスコンテナーに複数の行がある場合、各行の高さ(「クロスサイズ」)は、行にフレックスアイテムを含めるために必要な最小の高さです。
簡単に言えばgrid-auto-rows: 1fr;
、グリッドコンテナーの設定により、要求された内容が解決されます。
grid-auto-row
その行のが2だった場合、これは最初の行の1frのサイズが50pxに等しいことを意味しますか?