Subgrid

Baseline 2023 (Chrome 117, Safari 16, Firefox 71); breit verfügbar.

Chrome 117Edge 117Safari 16Firefox 71

Ein verschachteltes Grid kann die Zeilen- oder Spaltentracks seines Elternelements übernehmen, sodass Kartentitel, Textkörper und Footer über eine Kartenreihe hinweg ausgerichtet bleiben, auch wenn die Inhaltslängen variieren.

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: Ohne Subgrid legt jede Karte ihre eigenen Zeilen an; Buttons sind nicht mehr ausgerichtet, aber nichts überlappt.

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

Prompt

Nutze CSS Subgrid für ausgerichtete Kartenreihen: die Liste ist ein Grid, jede Karte setzt `display:grid; grid-template-rows: subgrid; grid-row: span N`, wobei N die Zahl der internen Zeilen ist (Titel, Text, Aktion). Fixiere keine Höhen und nutze keine JS-Gleichhöhen-Hacks; lass Subgrid die Tracks ausrichten.