title: Equal height of elements inside grid item with CSS grid layout
body: <p>I have a sequence of articles inside a div of 4+ length, without any rounding row tag. I need to represent it as a table of 3 articles (columns) per row, probably with <code>display: grid</code>. Every article has a header, a section and a footer.</p>
  
  <p>How would I implement an equal height for each header, an equal height for each section, and an equal height footer, aligned to the bottom of the article, inside each row of articles? Is it even possible? Should I use <code>display: table</code>?</p>
  
  <p>PS I need to change the number of articles per row dynamically, depending on screen width. Thanx.</p>
  
  <p>HTML:</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>body {
    width: 100%;
    max-width: 1024px;
    margin: auto;
  }
  
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .container article {
    display: grid;
  }
  
  article header {
    background-color: #eeeeee;
  }
  
  article section {
    background-color: #cccccc;
  }
  
  article footer {
    background-color: #dddddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;article&gt;
      &lt;header&gt;
        &lt;h2&gt;Header&lt;/h2&gt;
        &lt;h2&gt;Header&lt;/h2&gt;
      &lt;/header&gt;
      &lt;section&gt;
        &lt;p&gt;Content&lt;/p&gt;
      &lt;/section&gt;
      &lt;footer&gt;
        &lt;p&gt;Footer&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article&gt;
      &lt;header&gt;
        &lt;h2&gt;Header&lt;/h2&gt;
      &lt;/header&gt;
      &lt;section&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
      &lt;/section&gt;
      &lt;footer&gt;
        &lt;p&gt;Footer&lt;/p&gt;
        &lt;p&gt;Footer&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article&gt;
      &lt;header&gt;
        &lt;h2&gt;Header&lt;/h2&gt;
      &lt;/header&gt;
      &lt;section&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
      &lt;/section&gt;
      &lt;footer&gt;
        &lt;p&gt;Footer&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article&gt;
      &lt;header&gt;
        &lt;h2&gt;Header&lt;/h2&gt;
      &lt;/header&gt;
      &lt;section&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;Content&lt;/p&gt;
      &lt;/section&gt;
      &lt;footer&gt;
        &lt;p&gt;Footer&lt;/p&gt;
        &lt;p&gt;Footer&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>NB: JS is deprecated.</p>
  
  <p><a href="https://codepen.io/yudnikov/pen/mBvbGW?editors=1100#0" rel="noreferrer">https://codepen.io/yudnikov/pen/mBvbGW?editors=1100#0</a></p>
  
  <p><a href="https://stackoverflow.com/q/44488357/150926">This solution</a>: </p>
  
  <pre><code>grid-auto-rows: 1fr; 
  </code></pre>
  
  <p>has been proposed as a duplicate, which it is not. It will only give the articles equal height, while e.g. the headers of each article remains differently sized.</p>
  
  <p>I originally had this problem:</p>
  
  <p><a href="https://i.stack.imgur.com/Tu0YL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Tu0YL.png" alt="This is what I&#39;am talking about"></a></p>
  
  <p>And the <code>grid-auto-rows: 1fr</code> solution results in this:</p>
  
  <p><a href="https://i.stack.imgur.com/d9gXH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/d9gXH.png" alt="Wrong!"></a></p>