<div class="card-grid">
<article class="card">
<h3>Standard Plan</h3>
<p>Perfect for starters.</p>
<button>Join</button>
</article>
<article class="card">
<h3>Professional Plan with Priority Support</h3>
<p>For growing businesses that need more resources and dedicated time from our experts.</p>
<button>Join</button>
</article>
<article class="card">
<h3>Enterprise</h3>
<p>Full access.</p>
<button>Join</button>
</article>
</div>
* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", sans-serif;
background: #0f172a;
padding: 40px;
display: flex;
justify-content: center;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
width: 100%;
max-width: 900px;
}
.card {
background: #1e293b;
color: white;
padding: 24px;
border-radius: 16px;
border: 1px solid #334155;
/* The Subgrid Magic */
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* Spans title, text, and button rows */
gap: 16px;
}
h3 { margin: 0; font-size: 1.25rem; align-self: end; }
p { margin: 0; color: #94a3b8; line-height: 1.5; }
button {
background: #3b82f6;
color: white;
border: none;
padding: 10px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
align-self: end; /* Push to bottom */
}
button:hover { background: #2563eb; }
