0

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.

I'm using CSS Grid

#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>

Here is how the app looks like

enter image description here

Aleksandr Belugin
  • 2,149
  • 1
  • 13
  • 19
Victor Thadeu
  • 89
  • 1
  • 7
  • https://css-tricks.com/snippets/css/complete-guide-grid/ See align-items / align-content or align-self . margin-bottom:auto for aside might also work. – G-Cyrillus Jan 24 '20 at 21:36
  • Solved the issue with (align-items: flex-start;) for the #app div. – Victor Thadeu Jan 24 '20 at 21:36
  • 1
    Thank you G-Cyr your solution also worked as a charm (and is better than mine, since with a three or more column layout I'll be able to choose if i want it to stretch the height or not for each column) Thank you!! – Victor Thadeu Jan 24 '20 at 21:41

0 Answers0