title: Is it possible to place more than one element into a CSS-Grid-Cell without overlapping?
body: <p>I have three columns and one row and I want to place each grid-element into one of the three resulting cells. This is what I want, using three container-elements:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;div class="container"&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
      &lt;div class="element"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know that this would be possible using three containers, but I want to avoid using anything which isn't really 'necessary'.</p>
  
  <p>Using multiple rows and expanding an element from one to two or three rows wouldn't be as "smooth" as in the example I posted above. However, using multiple rows and just resizing an element resizes the complete row, which affects the position of the next row.</p>
  
  <p>A solution would be to place each element of the same column into the same cell. That way there's one row at most, and each time an element gets resized, it only affects the position of the elements in the same column, which is exactly what I want.</p>
  
  <p>The problem when placing multiple elements in the same cell is that they keep overlapping and I found no way to stop them from doing that.</p>
  
  <p>So is there a way to place multiple elements in the same cell without overlapping using only the css-grid layout?</p>