How to set min-height on the grid-template-column containers [duplicate]

Question

I have following problem: if there is content in first container, then the other two without content will be the same height as the first one:

https://jsfiddle.net/tj4hbya5/2/

.grid {
  padding: 5px;
  background: gray;
  display: grid;
  grid-template-columns: auto auto auto;
}
.todo-column {
  min-height: 150px;
  margin: 0 auto;
  width: 90%;
  background: cyan;
  text-align: center;
 }
  
.todo-title {
  color: white;
  font-size: 175%;
  padding: 5px;
  border-bottom: 5px dotted black;
 }

<div class="grid">
  <div class="todo-column">
    <h1 class="todo-title">Aloittamatta</h1>
    <h1>foo</h1>
    <h1>foo</h1>
    <h1>foo</h1>
    <h1>foo</h1>
    <h1>foo</h1>
    <h1>foo</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Työn alla</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Valmis</h1>
  </div>
</div>

So, how can I set the default height to be the same on all three containers, but if one of them has some content, then the height will be choosen automatically, while the other two without content stay at min-height?

Answer 1

Add align-items: self-start; in ".grid" class and set min-height in ".todo-column" class

.grid {
  padding: 5px;
  background: gray;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items:self-start;
}
.todo-column {
  min-height: 150px;
  margin: 0 auto;
  width: 90%;
  background: cyan;
  text-align: center;
 }
  
.todo-title {
  color: white;
  font-size: 175%;
  padding: 5px;
  border-bottom: 5px dotted black;
  min-height: 100px;
 }

<div class="grid">
  <div class="todo-column">
    <h1 class="todo-title">Aloittamatta</h1>
              <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Työn alla</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Valmis</h1>
  </div>
</div>