為什麼我的網格項的百分比高度沒有如預期運作？

為什麼網格元素高度在計算為父高度的百分比時失敗

CSS 網格的高度計算可能會令人困惑，尤其是在使用百分比時。在提供的範例中，網格項的高度設定為 200%，但它不會使容器的高度加倍。

理解網格層次結構

網格項目駐留在軌道內，軌道包含在容器內。因此，網格項的父級是軌道，而不是直接容器。

百分比高度和網格結構

當網格行的高度沒有定義為固定長度單位（例如，px）或計算為可用空間的一部分（例如，1fr），網格項的百分比高度失敗。在這種情況下，網格項的高度預設為 auto，有效地允許其根據需要擴展行。

設定容器和行高

以確保網格元素的height 基於容器的高度，在容器和行上設定固定的高度。在提供的程式碼中，容器高度為 100px，但行高設定為 1fr。透過將行高變更為 100px，網格項的 200% 高度將正確地將容器的高度加倍。

更新的範例：

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

.gridItem {
  // ...
  overflow: auto;
}

透過調整行高度與容器高度相匹配，網格項的高度現在將按預期運行，將容器的高度加倍並正確地將內容包裹在其中它。

以上是為什麼我的網格項的百分比高度沒有如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！