Get Element in Grid Container always on the bottom?

Question

I just created with Grid a simple responsive Layout and have a footer part in every box, which I want to stay always on the bottom: screens

I don't know how to proceed in this specific case cause there is no fixed size.

My code looks like this:

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

Big Thanks!

Answer 1

You can use display:flex with flex-flow:column, then use margin-top:auto on your bottom div.

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