<div class="grid">
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      body
    </div>
    <div class="card-footer">
      <div class="footer-content">
        footer
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
}

.card {
  position: relative;
}

.card-body {
  height: 100%;
  min-height: 150px;
  padding: 1rem;
  background-color: #efefef;
}

.card-footer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 0;
  background-color: #efefcc;
  overflow: hidden;
  transition: all 0.2s linear;
  z-index: 1;
}

.card:hover .card-footer {
  max-height: 3rem;
}

.footer-content {
  padding: 1rem;
}