title: CSS Grid: auto height including 1 column with multiple content blocks?
body: <p>I've checked out <a href="https://gridbyexample.com/example" rel="nofollow noreferrer">https://gridbyexample.com/example</a> and have been trying myself to make this work, but can't get it to fit right. Check out the attached image for what I'm trying to do. Is there an easy CSS-Grid way to do this? <a href="https://i.stack.imgur.com/jDBcZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jDBcZ.png" alt="enter image description here" /></a></p>
  <p>What I have so far for CSS:</p>
  <pre><code>.main-container {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  }
  
  .box {
    height: min-content;
    
  }
  
  /* Targeting the 2nd content block in column 3 */
  .box.d {
    grid-column: 3/6;
  }
  </code></pre>
  <p>What I have so far for HTML:</p>
  <pre><code>&lt;div class=&quot;main-container&quot;&gt;
    &lt;div class=-&quot;box a&quot;&gt;Content Here&lt;/div&gt;
    &lt;div class=-&quot;box b&quot;&gt;Content Here&lt;/div&gt;
    &lt;div class=-&quot;box c&quot;&gt;Content Here&lt;/div&gt;
    &lt;div class=-&quot;box d&quot;&gt;Content Here&lt;/div&gt;
    &lt;div class=-&quot;box e&quot;&gt;Content Here&lt;/div&gt;
    &lt;div class=-&quot;box f&quot;&gt;Content Here&lt;/div&gt;
  &lt;div&gt;
  </code></pre>