是否可以在一个CSS-Grid-Cell中放置多个元素而不重叠？

Question

我有三列和一行，我想将每个网格元素放入三个结果单元之一。这就是我想要的，使用三个容器元素：

main {
  display: grid;
  grid-template-columns: 33% 33% auto;
  grid-gap: 15px;
}

.container {
  background-color: orange;
}

.element {
  transition: height 0.5s;
  margin: 15px;
  height: 100px;
  background-color: grey;
}

.element:hover {
  height: 200px;
}

<main>
  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>

  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>

  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</main>

我知道使用三个容器可以做到这一点，但是我想避免使用任何并非真正“必需”的东西。

使用多行并将元素从一行扩展到两行或三行不会像我在上面的示例中那样“平滑”。但是，使用多行并仅调整元素的大小会调整整个行的大小，这会影响下一行的位置。

一种解决方案是将同一列的每个元素放入同一单元格中。这样，最多只有一行，而且每次调整元素大小时，它只会影响元素在同一列中的位置，这正是我想要的。

当在同一个单元格中放置多个元素时，问题在于它们保持重叠，而我发现没有办法阻止它们这样做。

那么有没有办法仅使用css-grid布局将多个元素放置在同一单元中而不重叠呢？

Answer 1

分配给网格的元素将不会应用任何流，因此无法围绕它。它们将彼此重击到网格上，就好像它们已被完全定位一样。但是，它们将服从任何z-index值。

这是因为规范明确指出，如果将元素分配给相交的区域，则允许它们重叠。

此外，规范鼓励将网格与弹性框混合使用，以获得更复杂的布局。