Flexbox が失敗する場合、CSS グリッドはどのようにして同じ高さの行を実現できるのでしょうか?

CSS グリッド レイアウトの同じ高さの行: より良い方法

Flexbox はすべての行にわたって同じ高さの行を収容できませんが、CSS グリッドは解決策を提供します。 fr ユニットを活用することで、この効果を簡単に実現できます。

グリッド レイアウトの魔法の仕組み

CSS グリッド レイアウトでは、fr ユニットは、グリッド コンテナー内の空きスペースを分配する柔軟な長さを示します。 。すべての行を 1fr に設定すると、同じ高さの行に変換されます。

ただし、魔法は fr の定義にあります。グリッド コンテナーの高さが不定である場合、fr トラック (この場合は行) はコンテンツの高さに適応します。

グリッド内の最も高いコンテンツによってコンテンツの最大の高さが決まり、これが 1fr の長さになります。そのため、1fr は、グリッド内の最も高い「セル」の高さをミラーリングすることによって、同じ高さの行を自動的に作成します。

Flexbox では不十分な理由

Flexbox は、同じ行に同じ高さの行を作成する場合に役立ちます。 、複数の行にわたってたどたどしくなります。フレックスボックスの仕様によれば、各行の高さは、その行のフレックス項目を収容するのに十分なだけです。この制限により、行全体で同じ高さの行を作成することができなくなります。

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