CSS グリッドは、Flexbox とは異なり、どのようにして行の高さを等しくすることができるのでしょうか?

CSS グリッド レイアウトの同じ高さの行: 詳細な説明

フレックスボックスとは対照的に、行の高さは必要な最小の高さによって決まります。 CSS グリッド レイアウトにより、開発者は要素全体にわたって同じ高さの行を実現できます。 Grid.

グリッド レイアウト ソリューション

同じ高さを実現する鍵は、グリッド コンテナーの Grid-auto-rows プロパティを 1fr に設定することにあります。 Fr ユニットは、Flexbox の flex-grow プロパティと同様に、コンテナ内の空き領域を分散するように設計されています。

grid-auto-rows: 1fr を設定すると、グリッド内のすべての行の高さが同じになります。 fr は動的にスペースを割り当てる必要があるため、これは直観に反するように思えるかもしれません。

Fr ユニットを理解する

ただし、CSS グリッドの仕様では、動的グリッドの寸法を扱う場合に重要なニュアンスが明らかになります。 , 「グリッド トラック」(この場合は行) は、コンテンツに合わせてサイズが変更されます。各行の高さは、最も高い (最大コンテンツ) グリッド項目に適応します。

これらの行の最大の高さは 1fr の長さになり、その後、各グリッド トラックのフレックス係数が乗算されて、最終的な高さが決定されます。サイズ。このメカニズムにより、すべての行の高さが均等になります。

Flexbox では不十分な理由

Flexbox は、CSS グリッドとは異なり、複数の行にわたって行の高さを均等にすることはできません。フレックス アイテムは、フレックスボックスの仕様に従って、同じ行内でのみ同じ高さを実現できます。

「複数行のフレックス コンテナでは、各行のクロス サイズは、フレックス アイテムをコンテナに含めるのに必要な最小サイズです。ライン。"この規定により、Flexbox が最小の高さを超えて行を拡張することができなくなります。

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