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中文网其他相关文章！