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

CSS グリッド レイアウトによる同じ高さの行

Flexbox とは対照的に、CSS グリッド レイアウトでは、開発者が全体にわたって同じ高さの行を実現できるようになります。グリッドを使用して、全体の差異を排除しますcolumns.

fr ユニットの役割

CSS グリッドには、グリッド コンテナー内の空きスペースを自動的に分配する柔軟な長さのユニットである fr ユニットが導入されています。次の構文のようにすべての行に適用すると、

grid-auto-rows: 1fr;

すべての行の高さが等しいとみなされます。直感に反しますが、この動作はグリッド仕様の特定の機能から生じます。

グリッド コンテナーの高さが無限である状況では、コンテンツの高さに合わせて fr の長さが動的に調整されます。たとえば、さまざまな高さの行を含むグリッドでは、最も高い行が 1fr の最大長を決定し、それが他のすべての行の高さを設定します。

Flexbox の制限

フレックスボックスには、複数行にわたって同じ高さの行を作成するための CSS グリッドと同じ機能がありません。 Flexbox 仕様によると:

In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.

言い換えると、フレックス コンテナー内の各行は、その項目に適合するために必要な高さを採用し、一貫した行の高さを妨げます。

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