是否可以在 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>

我知道这可以使用三个容器，但我想避免使用任何不是真的 'necessary'。

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

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

在同一个单元格中放置多个元素时的问题是它们会不断重叠，我发现没有办法阻止它们这样做。

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

Answer 1

分配给网格的元素不会应用任何流，没有办法绕过它。它们将一个接一个地拍打到网格上，就好像它们是绝对定位的一样。不过，它们将遵守任何 z-index 值。

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

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

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

Is it possible to place more than one element into a CSS-Grid-Cell without overlapping?

html

css

grid-layout

css-grid