{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Subgrid Card
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-sub { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr auto; gap: 6px; width: 340px; font-family: system-ui, sans-serif; color: #f0eeff; } .gl-sub-c { display: grid; grid-row: span 3; grid-template-rows: subgrid; background: #18181f; border: 1px solid rgba(124,108,255,0.28); border-radius: 8px; padding: 10px; gap: 6px; } .gl-sub-c h4 { margin: 0; font-size: 12.5px; color: #a78bfa; } .gl-sub-c p { margin: 0; font-size: 10.5px; color: #cbd5e1; line-height: 1.4; } .gl-sub-c button { background: rgba(124,108,255,0.18); color: #a78bfa; border: 1px solid rgba(124,108,255,0.4); border-radius: 5px; padding: 5px 0; font: 600 10.5px monospace; cursor: pointer; }
<div class="gl-sub"> <article class="gl-sub-c"> <h4>Plan A</h4> <p>Short description</p> <button>Pick</button> </article> <article class="gl-sub-c"> <h4>Plan B</h4> <p>A description that runs longer than the others to prove subgrid alignment</p> <button>Pick</button> </article> <article class="gl-sub-c"> <h4>Plan C</h4> <p>Another description</p> <button>Pick</button> </article> </div>
Live preview
Ready