Subgrid-ausgerichtete Zeile
Subgrid-ausgerichtete Zeile: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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.