title: CSS Grid - equal height of table-alike grandchild cells in visually synced rows
body: <p>Is there a way to automatically keep in sync rows height of table-alike structure between headers and body? I mean to force CSS Grid to keep each header and data row to have equal height, despite them having separate parents? I don't want headers and body to share the same column in HTML. I want two main columns: headers and body.</p>
  <p><strong>Additionally, number of rows as well as body columns is dynamic</strong>. The goal is to create comparison table, where headers represent product features <strong>names</strong> and body columns represent product features <strong>values</strong>. Also, table body will additionally be wrapped in <code>&lt;div&gt;</code> to introduce a slider feature.</p>
  <p>AFAIK CSS Subgrid theoretically would do that, but it's <a href="https://caniuse.com/?search=css%20subgrid" rel="nofollow noreferrer">experimental in Firefox only</a></p>
  <p>Below is simplified input code <a href="https://codepen.io/ScriptyChris/pen/mdWOqqO?editors=1100" rel="nofollow noreferrer">available also on CodePen</a>. I want &quot;Header 1&quot;, &quot;Data 1.1&quot;, &quot;Data 2.1&quot; cells to have same height. Same for higher rows, like &quot;Header 2 | higher header 2 | yet higher header 2&quot;, &quot;Data 1.2&quot;, &quot;Data 2.2&quot; - all cells should have same height.</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>.table {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  
  .table__headers,
  .table__body {
    border: 1px solid black;
  }
  
  .table__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    border: 1px solid blue;
    margin: 5px;
    padding: 5px;
  }
  
  .cell {
    border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
    &lt;div class="table__headers"&gt;
      &lt;div class="cell"&gt;Header 1&lt;/div&gt;
      &lt;div class="cell"&gt;
        Header 2
        &lt;br&gt;
        higher header 2
        &lt;br&gt;
        yet higher header 2
      &lt;/div&gt;
      &lt;div class="cell"&gt;
        Header 3
        &lt;br&gt;
        higher header 3
      &lt;/div&gt;
      &lt;div class="cell"&gt;Header 4&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="table__body"&gt;
      &lt;div class="table__body-inside"&gt;
        &lt;div class="cell"&gt;Data 1.1&lt;/div&gt;
        &lt;div class="cell"&gt;Data 1.2&lt;/div&gt;
        &lt;div class="cell"&gt;Data 1.3&lt;/div&gt;
        &lt;div class="cell"&gt;Data 1.4&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class="table__body-inside"&gt;
        &lt;div class="cell"&gt;Data 2.1&lt;/div&gt;
        &lt;div class="cell"&gt;Data 2.2&lt;/div&gt;
        &lt;div class="cell"&gt;Data 2.3&lt;/div&gt;
        &lt;div class="cell"&gt;Data 2.4&lt;/div&gt;
      &lt;/div&gt;
    &lt;/divc&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In a concise way: <strong>the highest cell in the <em>visual</em> row</strong> (because headers and body are technically in separate columns not being same row in the HTML) <strong>should dictate the height for the whole row</strong>.</p>
  <p>Below i attach ugly <em>Paint made</em> picture presenting what i want to achieve:
  <a href="https://i.stack.imgur.com/d9PWS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d9PWS.png" alt="enter image description here" /></a></p>