css - 使用 CSS Grid 的不等列高度

Question

大家好，我正在开发一个带有输入区域和任务列表的简单任务管理器。（只有两列）但我很难阻止我的输入菜单在添加新任务时增加大小。

我正在使用 CSS 网格

#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";
}

<div id="app">

  <aside>
    <form>
    </form>
  </aside>

  <div id="list">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

</div>

这是应用程序的外观

标签： csscss-grid