是否可以将多个元素放入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值。

这是因为规范explicitly states允许元素重叠，如果它们被分配给相交的区域。

此外，规范encourages将网格与flexboxes混合，以获得更复杂的布局。