title: Different height of CSS grid cells
body: <p>How can I move up the "content" and the "right" block responsive? The problem is I can't use sub nested grid. I don't need hacks: no margin-top because header can be a different height. No javascript. Only pure CSS. If at all possible.</p>
  
  <p><a href="https://i.stack.imgur.com/6whYY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6whYY.png" alt="enter image description here"></a></p>
  
  <p>Now my markup looks like this:</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>.wrapper {
    border: 1px solid red;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
            "aside header header"
            "left content right";
    grid-gap: 15px;
  }
  
  .header, .aside, .left, .content, .right {
    border: 1px solid black;
    padding: 10px;
  }
  
  .header {
    grid-area: header;
    height: 30px; /* in real case it's responsive height */
  }
  
  .aside {
    grid-area: aside;
    height: 80px; /* in real case it's responsive height */
  }
  
  .left {
    grid-area: left;
  }
  
  .content {
    grid-area: content;
    background: yellow;
  }
  
  .right {
    grid-area: right;
    background: yellow;
  }
  
  .left, .content, .right {
    height: 100px; /* in real case it's responsive height */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
     &lt;!-- this order should be on mobile --&gt;
     &lt;header class="header"&gt;header&lt;/header&gt;
     &lt;aside class="aside"&gt;aside&lt;/aside&gt;
     &lt;div class="left"&gt;left&lt;/div&gt;
     &lt;div class="content"&gt;content&lt;/div&gt;
     &lt;div class="right"&gt;right&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>