title: CSS only solution to set "same height" row sections on a responsive grid
body: <p><strong>Wanted</strong>: a CSS only solution to enable equal height grid "sections" on a per row basis, that is also responsive.</p>
  
  <p>This diagram hopefully explains the requirement better than the words in this post will: </p>
  
  <p><img src="https://i.stack.imgur.com/0iiIF.png" alt="helpful diagram"></p>
  
  <p>The "item grid" should be responsive - in that it can show a different number of cards per row based on viewport width. And within a given row, the equivalent sections should have the same height on a "per row" basis.</p>
  
  <p>In the below HTML &amp; CSS - the item cards are split in to the rows that we need (at the two example break points desktop &amp; mobile) but the content section heights are variable (yuck):</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>.items {
    max-width: 1200px;
  }
  
  .item {
    width: 25%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    padding: 0 12px;
    margin: 24px -4px 24px 0;
  }
  
  @media (max-width: 600px) {
    .item {
      width: 50%;
    }
  }
  
  .item__heading {
    background-color: #d4d0f5;
    padding: 10px;
    text-align: center;
    border: 1px solid #bbbbbb;
  }
  
  .item__content {
    padding: 10px;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
  }
  
  .item__price {
    background-color: #e0f6d9;
    padding: 10px;
    text-align: center;
    border: 1px solid #bbbbbb;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="items"&gt;
  
    &lt;div class="item"&gt;
      &lt;div class="item__heading"&gt;
        Item 1
      &lt;/div&gt;
      &lt;div class="item__content"&gt;
        Some content that is not that long
      &lt;/div&gt;
      &lt;div class="item__price"&gt;
        £99.99
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="item"&gt;
      &lt;div class="item__heading"&gt;
        Item 2
      &lt;/div&gt;
      &lt;div class="item__content"&gt;
        Some content that is longer than other items on the same row and sets the height of this section
      &lt;/div&gt;
      &lt;div class="item__price"&gt;
        £69.99
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;div class="item__heading"&gt;
        Item 3
      &lt;/div&gt;
      &lt;div class="item__content"&gt;
        Some content that is not that long
      &lt;/div&gt;
      &lt;div class="item__price"&gt;
        £69.99
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;div class="item__heading"&gt;
        Item 4
      &lt;/div&gt;
      &lt;div class="item__content"&gt;
        Some content that is not that long
      &lt;/div&gt;
      &lt;div class="item__price"&gt;
        £109.99
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;div class="item__heading"&gt;
        Item 5
      &lt;/div&gt;
      &lt;div class="item__content"&gt;
        Some content that is a medium kind of length blah blah
      &lt;/div&gt;
      &lt;div class="item__price"&gt;
        £29.99
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;div class="item__heading"&gt;
        Item 6
      &lt;/div&gt;
      &lt;div class="item__content"&gt;
        Some content that is not that long
      &lt;/div&gt;
      &lt;div class="item__price"&gt;
        £99.99
      &lt;/div&gt;
    &lt;/div&gt;
  
      
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The following codepen is a JavaScript based solution that achieves the desired outcome -
   but is what I am trying to avoid:
  <a href="https://codepen.io/rusta/pen/KmbVKd" rel="noreferrer">https://codepen.io/rusta/pen/KmbVKd</a></p>
  
  <p>Limitations</p>
  
  <ul>
  <li>The number of items to be displayed in the grid list can be any number from 1-150</li>
  <li>The size of the item content to be displayed will be genuinely variable (so picking a "sensible" min-height is not an option)</li>
  </ul>
  
  <p>I was hoping that the new CSS Grid system would help me achieve the above, but having played with it for a while it seems to need a bit more structure than I had hoped it would, and the responsive aspect seemed rather challenging. But maybe there is a CSS Grid based answer out there somewhere</p>
  
  <p>Further note: I say a CSS only solution, by which I mean a non-JS solution. If the HTML blocks need to change (order/nesting/class names) to support a non-JS solution that is absolutely fine</p>
  
  <p>In this trivial example - we are only focusing on the "content" section for having "matching heights" - as we can assume the heading and price sections will naturally be the same height. It would be nice to enable "equivalency" across any matching grid section (header/content/price/other) but that can be for another day...</p>