為什麼我的網格專案的百分比高度無法正常工作？

為什麼我的網格元素的高度計算不正確？

不正確的高度計算可能源自於 CSS 網格中高度百分比的解釋方式版面。

在您的程式碼中，網格容器的固定高度為 100px，而網格專案的高度為 200%。通常，您會預期網格項目佔據容器高度的兩倍 (200px)。但是，這在您的情況下沒有發生。

原因是在 CSS 網格佈局中，網格元素存在於軌道內，而軌道又存在於容器內。網格項佔據軌道內的行或列，而不是直接在容器內。

因此，網格項的高度百分比是相對於它佔據的軌道的高度，而不是容器的高度。在您的程式碼中，該行具有預設的自動高度，它允許網格項目根據需要拉伸。

要解決此問題，您必須為網格項目所佔用的行設定特定的高度。這將確保網格項的百分比高度相對於該高度正確計算。在修改後的程式碼中，行高已設定為 100px 以符合容器的高度，從而產生所需的行為：

.gridContainer {
  ...
  grid-template-rows: 100px;    /* Specifies a fixed height for the row */
}

以上是為什麼我的網格專案的百分比高度無法正常工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！