<ul class="grid">
  <li class="subgrid">
    <h2>Card header</h2>
    <span class="emoji" role="img" tabindex="0" aria-label="spouting whale">🐳</span>
    <p>Chocolate bar gummies powder bear claw cake dragée oat cake cake. </p>
    <span>Read more</span>
  </li>
  <li class="subgrid">
    <h2>Card header of different length</h2>
    <span class="emoji" role="img" tabindex="0" aria-label="owl">🦉</span>
    <p>Chupa chups marzipan ice cream croissant topping liquorice toffee chupa chups chocolate. Pie pie gummies sweet chocolate.</p>
    <span>Read more</span>
  </li>
  <li class="subgrid">
    <h2>Different card header</h2>
    <span class="emoji" role="img" tabindex="0" aria-label="monkey">🐒</span>
    <p>Cake icing toffee macaroon dragée pie powder chocolate cake. Croissant muffin tiramisu liquorice chocolate cake candy soufflé.</p>
    <span>Read more</span>
  </li>
  <li class="subgrid">
    <h2>Why cards?</h2>
    <span class="emoji" role="img" tabindex="0" aria-label="octopus">🐙</span>
    <p>Dragée bear claw chocolate cake jelly biscuit powder chupa chups oat cake.</p>
    <span>Read more</span>
  </li>
  <li class="subgrid">
    <h2>Caterpillar</h2>
    <span class="emoji" role="img" tabindex="0" aria-label="bug">🐛</span>
    <p>Fruitcake muffin pastry sesame snaps croissant gingerbread dessert cake liquorice. Sugar plum tiramisu pastry pudding.</p>
    <span>Read more</span>
  </li>
  <li class="subgrid">
    <h2>Crab</h2>
    <span class="emoji" role="img" tabindex="0" aria-label="crab">🦀</span>
    <p>Lemon drops dessert wafer bear claw chupa chups cotton candy. Oat cake chocolate dragée carrot cake cupcake tiramisu gingerbread jujubes danish.</p>
    <span>Read more</span>
  </li>
  <li class="subgrid">
    <h2>Chick</h2>
    <span class="emoji" role="img" tabindex="0" aria-label="front-facing baby chick">🐥</span>
    <p>Pie gingerbread chocolate cake chocolate chupa chups candy canes. Croissant sweet roll jelly.</p>
    <span>Read more</span>
  </li>
</ul>
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, calc((100% - 3em) / 4));
  grid-template-rows: repeat(4, auto);
  gap: 1em;

  padding: 1em;
}

.subgrid {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;

  border: 2px solid #000;
  box-shadow: 4px 4px 0 0 #222;
}

h2 {
  background-color: deepskyblue;
  color: white;
  padding: 0.5em;
}

.emoji {
  grid-row: 2;

  text-align: center;
  font-size: 5em;
}

p {
  padding: 0 1em;
}

span:last-of-type {
  justify-self: end;

  background-color: deepskyblue;
  color: white;
  padding: 0.5em;
}