為什麼我的 CSS 網格專案高度沒有成為父容器高度的兩倍？

CSS 網格：元素高度計算混亂

您遇到了CSS 網格元素高度的問題，特別是.gridItem ，未按預期計算。在此網格設定中：

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

.gridItem {
  height: 200%;
}

目的是讓 .gridItem 的高度為其父級 .gridContainer 的兩倍。然而，結果似乎反而考慮了子元素的高度。

理解 CSS 網格中的父子關係

使用 CSS 網格時，理解 CSS 網格中的父子關係至關重要親子關係。在這種情況下， .gridItem 的父元素不是直接的 .gridContainer ，而是包含它的網格軌道。

當指定 grid-template-rows: 1fr; 時，您可以使用靈活的佔用父級可用空間的 1 小數單位的高度。由於父軌道的高度固定為 100px，因此軌道的高度變成 100px。

因此，即使 .gridItem 的 height: 200%，它指的是其父軌道的高度，即 100px。這解釋了為什麼 .gridItem 的高度實際上是軌道高度的兩倍，而不是父容器的高度。

修正：在容器和軌道上設定明確高度

要解決此問題，您需要在 .gridContainer 和網格軌道上指定固定高度。這建立了清晰的父子關係，並允許 .gridItem 的百分比高度正常運作。

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

.gridItem {
  height: 200%;
}

透過此調整，.gridItem 的高度現在應該是 .gridContainer 高度的兩倍，正如預期的那樣.

以上是為什麼我的 CSS 網格專案高度沒有成為父容器高度的兩倍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！