{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Dashboard Skeleton
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-dash { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 50px 110px; grid-template-areas: "k1 k2 k3 k4" "ch ch ch ac"; gap: 6px; width: 340px; font-family: system-ui, sans-serif; color: #f0eeff; } .gl-dash > * { background: #18181f; border: 1px solid rgba(124,108,255,0.22); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .gl-dash-k { font-size: 16px; font-weight: 700; color: #a78bfa; } .gl-dash-k:nth-child(1) { grid-area: k1; } .gl-dash-k:nth-child(2) { grid-area: k2; color: #2eb88a; } .gl-dash-k:nth-child(3) { grid-area: k3; color: #f5a84a; } .gl-dash-k:nth-child(4) { grid-area: k4; color: #ff6c8a; } .gl-dash-chart { grid-area: ch; background: linear-gradient(180deg, rgba(124,108,255,0.22), rgba(167,139,250,0.06)); font-family: monospace; font-size: 11px; color: #cbb8ff; } .gl-dash-act { grid-area: ac; font-family: monospace; font-size: 10.5px; color: #cbd5e1; }
<div class="gl-dash"> <div class="gl-dash-k">42</div> <div class="gl-dash-k">87%</div> <div class="gl-dash-k">$12K</div> <div class="gl-dash-k">3.4×</div> <div class="gl-dash-chart">Chart</div> <div class="gl-dash-act">Activity</div> </div>
Live preview
Ready