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网格布局在同一个单元格中放置多个元素而不重叠呢？

- asdfsolider

---

你需要做的是在图片里创建一个至少有3列和3行的元素，这些元素需要跨越多行设置：https://jsfiddle.net/9b5abp3e/1/。提醒/教程：https://css-tricks.com/snippets/css/complete-guide-grid/ 它适用于列和行，这就是CSS网格布局的优势：https://jsfiddle.net/9b5abp3e/2/。对于你的草图，可以用以下代码实现：https://jsfiddle.net/9b5abp3e/3/ 或者 https://jsfiddle.net/9b5abp3e/4/。 - G-Cyrillus

我知道使用三个容器是可能的，但我想避免使用任何不是真正“必要”的东西。我有点困惑...你正在使用3个容器。我不知道你是否可以使用CSS Grid来实现这个（它倾向于期望一个固定大小），但你可以通过普通的CSS属性做到非常接近：https://jsfiddle.net/qq8nsk0g/1/ - TylerH

Answer 1

被指定到网格中的元素不会有任何流应用于它们，这是无法避免的。它们将被放置在网格上，就像绝对定位一样。它们将遵循任何z-index值。

这是因为规范明确规定，如果它们被分配到相交区域，则允许元素重叠。

此外，规范鼓励将网格与弹性盒子混合使用，以获得更复杂的布局。

- Palantir

---

很遗憾，你无法将流应用到网格单元格上，否则似乎就必须添加包装元素才能组合网格和弹性盒子。 - Nathan Arthur

@NathanArthur 请查看 https://github.com/w3c/csswg-drafts/issues/4416，这里有一个解决该问题的提案。 - Creepin

Answer 2

你不能像在flexbox中那样真正地管理流程。但是，如果你在一个单独的网格单元中有两个或三个项目，如果你能够管理高度，你可以尝试这个。它不完美，但可以作为一种技巧使用。

element1 {
  align-self: start;
}

element2 {
  align-self: center;
}

element3 {
  align-self: end;
}

- Stefan T