如何在grid-template-column容器上设置最小高度

Question

我有以下问题：如果第一个容器中有内容，那么其他两个没有内容的容器将与第一个容器具有相同的高度：

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>

因此，如何在所有三个容器上将默认高度设置为相同，但是如果其中一个容器包含一些内容，则将自动选择高度，而其他两个没有内容的容器保持最小高度？

Answer 1

在“ .grid”类中添加align-items: self-start;，并在“ .todo-column”类中设置min-height

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

Answer 2

.grid {
  padding: 5px;
  background: gray;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: 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;
 }

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