title: CSS Grid have sections inside different columns start at the same (row) height
body: <p>I am stuck with a css-grid problem:
  I have a grid which contains of 1-3 columns, depending on the screen size.<br />
  Each column is made out of 1 block who contains 2 sections(red and blue border).<br />
  Both sections can vary in height.<br />
  Within each block, the height of section 1 should always be the same, which is defined by whatever block needs the most to fit its content.<br />
  The following section should always directly follow the first one.</p>
  <p>What I thought may be the solution: Split each block into 2 rows. Each section takes up one row. Since each row within itself has a given height, the max height of section1 defines the start of row2. Therefore, if I tell section2 to start at the second row, everything should be aligned.<br />
  I tried that approach with <code>grid-template-rows: 1fr auto</code> and then giving each block <code>grid-row: span 2</code> and each section a <code>grid-row: span 1</code> but that did not work as expected.</p>
  <p><a href="https://codepen.io/leviathan91/pen/bGryGOr" rel="nofollow noreferrer">Link to Codepen if you prefer that over the snippet</a></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>.item {
    height: 50px;
  }
  
  .item1 {
    background-color: blanchedalmond;
  }
  
  .item2 {
    background-color: cadetblue;
  }
  
  .item3 {
    background-color: coral;
  }
  
  .section1 {
    border: 5px solid red;
  }
  
  .section2 {
    border: 5px solid blue;
  }
  
  .block1 {
    border: 5px solid green;
  }
  
  .block2 {
    border: 5px solid orchid;
  }
  
  .block3 {
    border: 5px solid aqua;
  }
  
  .container {
    display: grid;
    max-width: 1410px;
    margin: auto;
    padding: 50px 3%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2%;
    row-gap: 50px;
  }
  
  
  /* MEDIA QUERIES */
  
  
  /* L */
  
  @media (max-width: 1000px) {
    .container {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  
  /* XS */
  
  @media (max-width: 630px) {
    .container {
      grid-template-columns: 1fr;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="block1"&gt;
      &lt;div class="section1"&gt;
        &lt;div class="item item1"&gt;item 1&lt;/div&gt;
        &lt;div class="item item2"&gt;item 2&lt;/div&gt;
        &lt;div class="item item3"&gt;item 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="section2"&gt;
        &lt;div class="item item1"&gt;item 1&lt;/div&gt;
        &lt;div class="item item2"&gt;item 2&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="block2"&gt;
      &lt;div class="section1"&gt;
        &lt;div class="item item1"&gt;item1&lt;/div&gt;
        &lt;div class="item item2"&gt;item2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="section2"&gt;
        &lt;div class="item item1"&gt;item1&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="block3"&gt;
      &lt;div class="section1"&gt;
        &lt;div class="item item1"&gt;item1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="section2"&gt;
        &lt;div class="item item2"&gt;item1&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>