我有三列和一行，我想将每个网格元素放入三个结果单元之一。这就是我想要的，使用三个容器元素：
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布局将多个元素放置在同一单元中而不重叠呢？