Ist es möglich, mehr als ein Element in einer CSS-Grid-Cell zu platzieren, ohne sich zu überlappen?

Ich habe drei Spalten und eine Zeile und möchte jedes Gitterelement in einer der drei resultierenden Zellen platzieren. Das ist, was ich will, mit drei Container-Elementen:

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>

Ich weiß, dass dies mit drei Containern möglich wäre, aber ich möchte vermeiden, etwas zu verwenden, das nicht wirklich “notwendig” ist.

Die Verwendung mehrerer Zeilen und die Erweiterung eines Elements von einer auf zwei oder drei Zeilen wäre nicht so “flüssig” wie in dem Beispiel, das ich oben gepostet habe. Wenn Sie jedoch mehrere Zeilen verwenden und nur die Größe eines Elements ändern, wird die Größe der gesamten Zeile geändert, was sich auf die Position der nächsten Zeile auswirkt.

Eine Lösung wäre, jedes Element derselben Spalte in derselben Zelle zu platzieren. Auf diese Weise gibt es höchstens eine Zeile, und jedes Mal, wenn die Größe eines Elements geändert wird, wirkt sich dies nur auf die Position der Elemente in derselben Spalte aus, was genau das ist, was ich will.

Das Problem beim Platzieren mehrerer Elemente in derselben Zelle besteht darin, dass sie sich ständig überlappen, und ich habe keine Möglichkeit gefunden, sie daran zu hindern.

Gibt es also eine Möglichkeit, mehrere Elemente in derselben Zelle zu platzieren, ohne sich zu überlappen, indem nur das CSS-Rasterlayout verwendet wird?

Auf Elemente, die dem Raster zugewiesen sind, wird kein Fluss angewendet, daran führt kein Weg vorbei. Sie werden übereinander auf das Gitter geschlagen, als ob sie absolut positioniert wären. Sie werden jedoch jedem Z-Index-Wert gehorchen.

Dies liegt an der Spezifikation ausdrücklich erklärt dass sich die Elemente überlappen dürfen, wenn sie sich überschneidenden Bereichen zugeordnet sind.

Auch die Spezifikation ermutigt Gitter mit Flexboxen zu mischen, um komplexere Layouts zu erhalten.