获取 Grid Container 中的 Element 总是在底部？

Question

我刚刚使用 Grid 创建了一个简单的响应式布局，并且在每个框中都有一个页脚部分，我希望它始终位于底部： screens

我不知道在这个具体案例中如何进行，因为没有固定大小。

我的代码如下所示：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 4%;
}

.col {
  display: relative;
  background-color: #f6f6f6;
  padding: 2rem;
}

.wrapper {
  display: flex;
  width: 70%;
  justify-content: space-between;
  align-items: center;
}

<div class="container">
  <div class="col">
      <h2>Der Besuch der alten Dame</h2>
      <h4>Ein Drama von Friedrich Dürrenmatt</h4>
      <p>Das beschauliche Güllen bekommt Besuch von einer Milliardärin, die viel Geld verspricht, wenn eine im Grunde unerfüllbare Bedingung eingelöst wird. Nun beginnt es zu rumoren im Ort.</p>
      <div class="wrapper">
        <h4>Fr, 5.10.</h4>
        <h4>20 Uhr</h4>
        <button class="hero-btn" type="button" name="button">+</button>
      </div>
  </div>
</div>

非常感谢！

Answer 1

您可以将 display:flex 与 flex-flow:column 一起使用，然后在 div 上使用 margin-top:auto。

.col{
  width:300px;
  height:150px;
  display: flex;
  flex-flow: column;  
  border: 1px solid black;   
}
.a{
  background-color:yellow;
}
.b{
  background-color:green;
}
.c{
  margin-top:auto;  
  background-color:orange;
}

<div class="col">
  <div class="a">
    A
  </div>
  <div class="b">
    B
  </div>
  <div class="c">
    C
  </div>
</div>

获取 Grid Container 中的 Element 总是在底部？

Get Element in Grid Container always on the bottom?

html

css

grid

flexbox