Subgrid-ausgerichtete Zeile

Subgrid-ausgerichtete Zeile: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

subgridgridalignedlayoutmodern-csslight

Starter

For one person and a couple of side projects.

Choose

Team

Shared spaces, roles, review flows and a very long description that would normally push the button down.

Choose

Scale

Everything, plus support.

Choose
CSS
.card-072 {
  display: grid;
  grid-template-columns: repeat(3,180px);
  gap: 14px;
  font-family: system-ui,sans-serif;
  color: #111827
}
.card-072 article {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 10px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  transition: border-color .15s
}
.card-072 article:hover {
  border-color: #111827
}
.card-072 h3 {
  margin: 0;
  font-size: 17px
}
.card-072 p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280
}
.card-072 a {
  display: block;
  padding: 9px;
  text-align: center;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none
}
.card-072 a:hover {
  background: #000
}
.card-072 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<div class="card-072">
  <article><h3>Starter</h3><p>For one person and a couple of side projects.</p><a href="#">Choose</a></article>
  <article><h3>Team</h3><p>Shared spaces, roles, review flows and a very long description that would normally push the button down.</p><a href="#">Choose</a></article>
  <article><h3>Scale</h3><p>Everything, plus support.</p><a href="#">Choose</a></article>
</div>
Prompt

Erstelle eine Reihe aus drei 180px Cards, deren Titel, Beschreibungen und Buttons über die Cards hinweg bündig sind, auch bei unterschiedlichen Textlängen. Der Container ist ein Grid mit drei Spalten und 14px Gap; jede Card ist selbst ein Grid mit grid-template-rows: subgrid über 3 Zeilen, sodass alle Zeilen dieselben Spurhöhen teilen. Cards sind weiß mit 1px #e5e7eb Rahmen (schwarz beim Hover), 14px Radius, 18px Padding, 17px Titel, 13px #6b7280 Text und einem schwarzen Button "Choose" in voller Breite in der letzten Zeile.