A subgrid shares its parent's rows, so cards line up.

Two product cards sit side by side. One title wraps onto two lines, so its price and button sit lower than the other card's. It looks broken, and each card's own grid cannot know about its neighbour.

A subgrid fixes it. Make each card span three rows of the parent grid, then give it display: grid and grid-template-rows: subgrid. Now the title, price and button use the parent's rows, and each row grows to fit its tallest part.

The parent must be a grid, or there are no rows to borrow.

<div class="shelf">
  <div class="card"><h3>Lamp</h3><p>£20</p><button>Add</button></div>
  <div class="card"><h3>Oak reading chair with cushions</h3><p>£180</p><button>Add</button></div>
</div>

.shelf {
  display: grid;
  grid-template-columns: 140px 140px;
  gap: 12px;
}
.card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  padding: 8px;
  background-color: #e0f2f1;
}