CSSグリッドレイアウトの高さが等しい行


98

Flexboxを使用してこれを達成することは不可能であると私は収集しています。各行はその要素に合わせるために必要な最小の高さしかあり得ないのですが、これは新しいCSSグリッドを使用して達成できますか?

明確にするために、グリッド内のすべての要素の高さを、各行だけでなく、すべての行にわたって等しくしたいと考えています。基本的に、最も高い「セル」は、その行のセルだけでなく、すべてのセルの高さを示します。

回答:


181

短い答え

目的が同じ高さの行を持つグリッドを作成することであり、グリッド内の最も高いセルがすべての行の高さを設定する場合、ここにすばやく簡単な解決策があります。

  • コンテナを grid-auto-rows: 1fr

使い方

グリッドレイアウトは、グリッドコンテナーでフレキシブルな長さを確立するためのユニットを提供します。これがfr単位です。これは、コンテナー内の空きスペースを分散するように設計されておりflex-grow、フレックスボックスのプロパティにいくらか類似しています。

グリッドコンテナーのすべての行をに設定した場合、次の1frように言ってみましょう。

grid-auto-rows: 1fr;

...その後、すべての行が同じ高さになります。

frは空きスペースを配布することになっているため、そのままでは意味がありません。また、複数の行に高さが異なるコンテンツがある場合、スペースが分散されると、一部の行はそれに比例して小さくなり、背が高くなります。

を除いて、グリッド仕様の奥深くに埋め込まれているのはこの小さなナゲットです。

7.2.3。柔軟な長さ:fr 単位

...

使用可能なスペースが無限の場合(グリッドコンテナーの幅または高さが不明確な場合に発生します)、フレックスサイズ(fr)のグリッドトラックは、それぞれの比率を維持しながらコンテンツに合わせてサイズ変更されます。

各フレックスサイズのグリッドトラックの使用サイズは、各フレックスサイズのグリッドトラックのmax-contentサイズを決定し、そのサイズをそれぞれのフレックスファクターで割って「仮想1fr サイズ」を決定することによって計算されます。

それらの最大値は、解決1frされた長さ(フレックス分数)として使用され、各グリッドトラックのフレックスファクターが乗算されて、最終的なサイズが決定されます。

したがって、これを正しく読んでいる場合、動的にサイズ変更されるグリッド(たとえば、高さが不明確)を処理する場合、グリッドトラック(この場合は行)はそのコンテンツに合わせてサイズ変更されます。

各行の高さは、最も高い(max-content)グリッド項目によって決定されます。

これらの行の最大の高さがの長さになり1frます。

これ1frが、グリッドコンテナーに同じ高さの行を作成する方法です。


フレックスボックスがオプションではない理由

質問で述べたように、フレックスボックスでは同じ高さの行は使用できません。

フレックスアイテムは、同じ行で同じ高さにすることができますが、複数の行にわたってはできません。

この動作はフレックスボックスの仕様で定義されています:

6.フレックスライン

複数行のflexコンテナでは、各行のクロスサイズは、行にflexアイテムを含めるために必要な最小サイズです。

つまり、行ベースのフレックスコンテナーに複数の行がある場合、各行の高さ(「クロスサイズ」)は、行にフレックスアイテムを含めるために必要な最小の高さです。


前述の段落では、この部分の正確な意味は次のとおりです。「そのサイズをそれぞれのフレックスファクターで割って、「仮想1frサイズ」を決定します。たとえば、グリッドコンテナーの最初の行の最大サイズが100pxで、grid-auto-rowその行のが2だった場合、これは最初の行の1frのサイズが50pxに等しいことを意味しますか?
Od Chan

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.