Flexbox では同じ高さの行を実現できないのに、CSS グリッド レイアウトではどのようにして同じ高さの行を実現できるのでしょうか?

CSS グリッド レイアウトで同じ高さの行を作成する

HTML および CSS レイアウトの領域では、同じ高さの行を実現することが重要です。共通の課題。従来、Flexbox では行ベースの高さ計算が行われ、各行がその最も高い要素によって決定されるため、これは実現できませんでした。しかし、CSS グリッド レイアウトの出現により、この問題に対する多用途の解決策が提供されます。

解決策: 1fr 単位の CSS グリッド レイアウト

同じ高さを作成するための鍵グリッド内の行は、grid-auto-rows プロパティの 1fr ユニットを利用します。この単位は「小数単位」の略で、グリッド コンテナー内の柔軟な長さを表します。

<br>grid-auto-rows: 1fr;<br>

すべての行の Grid-auto-rows プロパティを 1fr に設定することで、利用可能な垂直方向のスペースを分配するようにブラウザに指示します。彼らの間でも平等に。これにより、すべての行の高さが同じになります。

仕組み

1fr の背後にある魔法は、その内容に基づいて拡大および縮小できる機能にあります。グリッドセル。動的レイアウトでよくあることですが、コンテナーの高さが無限である場合、最も高いコンテンツに合わせてグリッド トラック (この場合は行) のサイズが自動的に変更されます。

行の最大高さは次のようになります。 1fr に相当し、割り当てられた 1fr 値を乗算して各行の最終的な高さを決定します。基本的に、すべての行は最も高い行の高さを継承します。

Flexbox が実行可能なオプションではない理由

グリッド レイアウトとは異なり、Flexbox には方法がありません。複数の行にわたって同じ高さの行を作成します。 Flexbox の仕様に従って、各行のクロス サイズ (高さ) は、その内容に適合するために必要な最小の高さに制限されます。

この動作により、Flexbox だけで目的の効果を達成することができなくなります。 CSS グリッド レイアウトだけが、グリッド内のすべての行で同じ高さの行に必要な柔軟性と機能を提供します。

以上がFlexbox では同じ高さの行を実現できないのに、CSS グリッド レイアウトではどのようにして同じ高さの行を実現できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。