高さ 200% のグリッド項目が親コンテナを満たさないのはなぜですか?

グリッド要素の高さの計算

質問:

CSS グリッド レイアウトでは、グリッド項目の高さは 200% に設定されていますが、親に合わせて拡大されません。コンテナの高さ。代わりに、その子要素の高さのままになります。なぜこのようなことが起こるのでしょうか?

答え:

グリッド要素の高さの計算は、グリッド構造内の位置によって決まります。グリッド項目の親はコンテナではなく、それが存在するトラックです。

この場合、コンテナの高さは 100px に固定されていますが、行の高さは柔軟な長さの単位である 1fr に設定されています。 。その結果、グリッド項目の高さのパーセンテージ (200%) はトラックの高さに相対し、項目がトラックを垂直方向に拡張できるようになります。

解決策:

グリッド項目がコンテナの高さを満たすように拡張されるようにするには、行の高さも固定する必要があります。行の高さをコンテナの高さと同じ値 (例: Grid-template-rows: 100px) に設定すると、グリッド項目の高さの割合がコンテナの高さに基づいて正しく計算されます。

.gridContainer {
  grid-template-rows: 100px; /* Adjustment; previously set to 1fr */
}

この調整により、グリッド項目がコンテナーの高さ全体を占めるようになり、はみ出したコンテンツはスクロール バーで非表示になります。

以上が高さ 200% のグリッド項目が親コンテナを満たさないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。