title: CSS grid expand a single column in a row
body: <p>I have CSS grid with a single row. One of the columns has more content than the others and I would like to expand it vertically without expanding the others.</p>
  
  <p>I have tried using <code>grid-template-rows: auto</code> but that expands all the columns. I have also tried using <code>display: flex</code> and <code>flex-grow: 1</code> with no luck.</p>
  
  <p>I would like the second column to be longer than the others, but actually it is the same height</p>
  
  <p><img src="https://i.imgur.com/c9iGdFU.png" alt="actual"></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 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2rem;
    grid-template-areas: "first second third";
  }
  
  .item1 {
    grid-area: first;
    border-style: solid;
  }
  
  .item2 {
    grid-area: second;
    border-style: solid;
  }
  
  .item3 {
    grid-area: third;
    border-style: solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="item1"&gt;item 1&lt;/span&gt;
  &lt;span class="item2"&gt;item 2&lt;br&gt;&lt;br&gt;expanded&lt;/span&gt;
  &lt;span class="item3"&gt;item 3&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/679y4d0z/" rel="nofollow noreferrer">https://jsfiddle.net/679y4d0z/</a></p>