如何使网格项跨越到 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中文网其他相关文章！