Subgrid

Baseline 2023 (Chrome 117, Safari 16, Firefox 71); disponible de forma generalizada.

Chrome 117Edge 117Safari 16Firefox 71

Un grid anidado puede adoptar las pistas de filas o columnas de su padre, de modo que títulos, cuerpos y pies de las tarjetas se alinean a lo largo de una fila aunque el contenido tenga distinta longitud.

Starter
Short blurb.
Choose
Team plan
Much longer description that pushes the button down, but only here.
Choose
Enterprise
Medium copy.
Choose

CSS

.fx-005 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  font-family: system-ui
}
.fx-005 li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 8px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px
}
.fx-005 a {
  align-self: end;
  justify-self: start;
  padding: 8px 14px;
  background: #111;
  color: #fff;
  border-radius: 6px;
  text-decoration: none
}
.fx-005 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<ul class="fx-005">
  <li><h3>Starter</h3><p>Short blurb.</p><a href="#">Choose</a></li>
  <li><h3>Team plan</h3><p>Much longer description that pushes the button down, but only here.</p><a href="#">Choose</a></li>
  <li><h3>Enterprise</h3><p>Medium copy.</p><a href="#">Choose</a></li>
</ul>

Fallback: Sin subgrid cada tarjeta distribuye sus propias filas; los botones dejan de alinearse, pero nada se solapa.

Fuente: developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid

Prompt

Usa CSS subgrid para filas de tarjetas alineadas: la lista es un grid y cada tarjeta define `display:grid; grid-template-rows: subgrid; grid-row: span N`, donde N es el número de filas internas (título, cuerpo, acción). No fijes alturas ni uses hacks de altura igual con JS; deja que subgrid alinee las pistas.