如何使網格項目跨越到 CSS 網格中的最後一行/列？

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

在 CSS 網格中，可以使網格項目跨越到使用負整數的明確網格中的最後一行/列。但是，此技術不適用於隱式網格。

隱式網格

隱式網格沒有固定數量的行和列，因此不可能直接指定到最後一行/列的跨度。例如，考慮以下具有未知行數的網格：

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

隱式網格中的跨越

要使專案跨越從第一個到最後一個隱式網格中的行，可以使用絕對定位。在此範例中，我們將第三個框放置在其他框上方，然後向下偏移，使其看起來跨越行：

.box:nth-child(3) {
  background-color: yellow;
  position: relative;
  top: calc(-100vh + 20px);
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

明確網格

在明確定義行和列的明確網格中，您可以使用負整數跨越到最後一行/列。如下圖所示：

.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}

.item {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
}

在此範例中，.item 元素將跨越網格的整個第二列和行。

結論

雖然CSS 網格沒有提供直接跨越到隱式網格中最後一行/列的方法，但您可以使用絕對值來實現這一點定位。然而，在顯式網格中，您可以使用負整數來達到此目的。

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