我有三列和一行,我想将每个网格元素放入三个结果单元格中的一个。这就是我想要的,使用三个容器元素:
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>
&#13;
我知道这可以使用三个容器,但我想避免使用任何不必要的东西。
使用多行并将元素从一行扩展到两行或三行不会像#34;平滑&#34;就像我上面发布的例子一样。但是,使用多行并仅调整元素大小会调整整行的大小,从而影响下一行的位置。
解决方案是将同一列的每个元素放入同一个单元格中。这样,最多只有一行,每次调整元素大小时,它只会影响同一列中元素的位置,这正是我想要的。
将多个元素放在同一个单元格中的问题是它们保持重叠,我发现无法阻止它们这样做。
那么有没有办法在同一个单元格中放置多个元素而不仅仅使用css-grid布局重叠?
答案 0 :(得分:3)
分配给网格的元素将不会应用任何流,无法绕过它。它们将被打到网格上,就好像它们是绝对定位的一样。但是,它们将遵循任何z-index值。
这是因为规范explicitly states允许元素重叠,如果它们被分配给相交的区域。
此外,规范encourages将网格与flexbox混合,以获得更复杂的布局。