title: Unequal column heights with CSS Grid
body: <p>Hello guys I'm developing a simple task manager with an input area and a list of tasks. (just two columns) but I'm having a hard time preventing my input menu to increase size as I add new tasks.</p>
  
  <p>I'm using CSS Grid</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>#app {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 315px 1fr;
    grid-template-areas: "task-add task-list";
    grid-gap: 30px;
  }
  
  #app aside {
    grid-area: task-add;
  }
  
  #list {
    grid-area: task-list;
  }
  
  #list ul {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  #list li {
    display: grid;
    grid-template-columns: 1fr 55px 35px;
    grid-template-areas: "task-title task-time task-delete";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
  
    &lt;aside&gt;
      &lt;form&gt;
      &lt;/form&gt;
    &lt;/aside&gt;
  
    &lt;div id="list"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is how the app looks like</p>
  
  <p><a href="https://i.stack.imgur.com/dySTH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dySTH.png" alt="enter image description here"></a></p>