CSS グリッド項目の高さが親コンテナの高さの 2 倍にならないのはなぜですか?

CSS グリッド: 要素の高さ計算の混乱

CSS グリッド要素、特に .gridItem の高さに関する問題が発生しています。 、期待どおりに計算されていません。このグリッド設定では:

.gridContainer {
  height: 100px;
  grid-template-rows: 1fr;
}

.gridItem {
  height: 200%;
}

.gridItem の高さをその親である .gridContainer の 2 倍にすることが目的です。ただし、結果では代わりに子要素の高さが考慮されるようです。

CSS グリッドの親子関係を理解する

CSS グリッドを使用する場合は、親子関係。この場合、.gridItem の親要素は、.gridContainer ではなく、それを含むグリッド トラックです。

grid-template-rows: 1fr; を指定する場合、柔軟な .gridContainer を使用してトラックを作成します。親の使用可能なスペースの 1 小数単位を占める高さ。親の高さは 100px に固定されているため、トラックの高さは 100px になります。

したがって、.gridItem の高さが 200% であっても、親トラックの高さ (100px) を参照します。これは、.gridItem の高さが親コンテナではなくトラックの高さの実質 2 倍である理由を説明しています。

修正: コンテナとトラックの両方に明示的な高さを設定する

この問題を解決するには、.gridContainer とグリッド トラックの両方で固定の高さを指定する必要があります。これにより、明確な親子関係が確立され、.gridItem の高さのパーセンテージが正しく機能できるようになります。

.gridContainer {
  height: 100px;
  grid-template-rows: 100px;
}

.gridItem {
  height: 200%;
}

この調整により、.gridItem の高さは、期待どおり .gridContainer の高さの 2 倍になるはずです。 .

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