<div class="cards">
  <div class="card">
    <header>Turnip greens</header>
    <div> Yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert. </div>
    <footer>Lotus root water spinach fennel kombu maize bamboo shoot.</footer>
  </div>
  
  <div class="card">
    <header>Sea lettuce lettuce water chestnut eggplant </header>
    <div> green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</div>
    <footer>Celery potato</footer>
  </div>
  
  <div class="card">
    <header>Kohlrabi beetroot carrot watercress</header>
    <div>Brussels sprout coriander water chestnut gourd swiss chard wakame. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</div>
    <footer>Raisin horseradish spinach carrot soko</footer>
  </div>
</div>

.cards {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto 1fr auto;
 max-width: 960px;
  margin: 50px auto;
}

.card {
  border: 1px solid #ccc;
  padding: .4em;
  grid-row: auto /  span 3;
  display: grid;
  gap: 0;
  grid-template-rows: subgrid;
}

.card > * {
  padding: .3em;
}

.card header {
  background-color: #6200ee;
  color: #fff;
}

.card footer {
  background-color: #3700b3;
  color: #fff;
}

body {
  font-family: system-ui, sans-serif;
}