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

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

行の高さは行に含まれる要素しか対応できないため、Flexbox を使用して行の高さを等しくすることは現実的ではありません。ただし、CSS グリッドは解決策を提供します。

原則

同じ高さの行を持つグリッドを作成するには、すべての行を Grid-auto-rows: 1fr に設定することが重要です。

テクニック

グリッド レイアウトの fr ユニットコンテナ内の利用可能な空き領域に基づいて領域を均等に割り当てます。行 (grid-auto-rows: 1fr) に適用すると、すべての行がその空き領域の等しい部分を要求します。

魔法の背後にある理由

グリッド レイアウト仕様では、柔軟なサイズ (高さは無制限) のグリッドでは、グリッド トラック (行) はその内容の高さを採用します。各行の最も高い項目によって、すべての行の高さが決まります。この最大高さが 1fr の長さになり、行の高さが均等になります。

Flexbox ではうまくいかない理由

Flexbox は同じ行内で同じ高さの行のみを許可するため、クロスには適していません。 -行の均等化。 Flexbox 仕様によると、複数行コンテナでは、行の高さは、フレックス項目を収容するために必要な最小の高さによって決まります。

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