title: CSS grid with columns of unequal height and width
body: <p>I have 5 boxes: three on the first row, the next two on the second row:</p>
  
  <p>I want all the boxes <em>but</em> the second to be of equal height <em>and</em> the 5<sup>th</sup> box to go right under the 3<sup>th</sup>. </p>
  
  <p>I tried this with flexbox and I am now trying it with <code>display: grid</code>. I am looking for a CSS <em>only</em> solution, if possible.</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>.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-auto-rows: min-content;
    grid-gap: 0;
    background-color: #2196F3;
  }
  .grid-container &gt; div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    border: 1px solid #ccc;
    font-size: 30px;
  }
  .item4 {
    grid-column-start: 1;
    grid-column-end: 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="grid-container"&gt;
    &lt;div class="item1"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;&lt;/div&gt;
    &lt;div class="item2"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.&lt;/p&gt;&lt;/div&gt;
    &lt;div class="item3"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;&lt;/div&gt;  
    &lt;div class="item4"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;&lt;/div&gt;
    &lt;div class="item5"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I am looking for is well illustrated in the picture bellow: 
  <a href="https://i.stack.imgur.com/Kxx1i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kxx1i.png" alt="enter image description here"></a></p>
  
  <p>What shall I do to achieve the desired result?</p>