html - 是否可以在 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 混合，以获得更复杂的布局。