如何在网格模板列容器上设置最小高度[重复]答案

【问题标题】：How to set min-height on the grid-template-column containers [duplicate]如何在网格模板列容器上设置最小高度[重复]
【发布时间】：2020-03-18 11:13:23
【问题描述】：

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

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>

那么，如何将所有三个容器的默认高度设置为相同，但如果其中一个有内容，那么高度将自动选择，而另外两个没有内容的则保持最小高度？

【问题讨论】：

align-items: start; 到网格容器？

标签： html css css-grid

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：