CSS 網格可以將網格項目跨越到隱式網格中的最後一行/列嗎？

在隱式網格中將網格項跨度到最後一行/列

簡介

在隱式網格中，行數和columns 沒有明確定義，在不知道其確切數量的情況下將網格項目跨越到最後一行或最後一列可能具有挑戰性。這個問題探討了使用 CSS Grid 實現此目的的可能性。

有可能嗎？

在目前版本中，CSS Grid 無法直接從第一個網格項目開始跨越網格項目到隱式網格中的最後一行/列。雖然負整數可用於從顯式網格的末端邊緣開始計數，但此方法不適用於這種情況。

使用絕對定位的替代解決方案

雖然網格限制阻止跨越到最後一個行/列，絕對定位提供了一種潛在的解決方法。透過將項目絕對放置在容器內，可以對其進行定位和拉伸以填充隱式網格末端的空間。

使用絕對定位的範例

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  height: 200px;
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: yellow;
}

<div class="container">
  <div class="item">Item</div>
  ... other grid items
</div>

中在此範例中，.item 被絕對定位並拉伸以填充容器的整個高度，從而產生跨越到最後一個的錯覺

結論

雖然CSS網格限制不允許直接跨越到隱式網格中的最後一行/列，但可以使用絕對定位等替代技術來實現類似的效果。

以上是CSS 網格可以將網格項目跨越到隱式網格中的最後一行/列嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！