{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Kanban Board
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-kan { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 6px; width: 340px; font-family: system-ui, sans-serif; color: #f0eeff; } .gl-kan-col { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,108,255,0.18); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .gl-kan-h { font-family: monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a78bfa; padding: 2px 4px 4px; } .gl-kan-card { background: #18181f; border: 1px solid rgba(124,108,255,0.28); border-radius: 5px; padding: 6px 8px; font-size: 10.5px; color: #cbd5e1; }
<div class="gl-kan"> <div class="gl-kan-col"> <div class="gl-kan-h">To Do</div> <div class="gl-kan-card">Design</div> <div class="gl-kan-card">Brief</div> <div class="gl-kan-card">Mockup</div> </div> <div class="gl-kan-col"> <div class="gl-kan-h">Doing</div> <div class="gl-kan-card">Build grid</div> <div class="gl-kan-card">Tests</div> </div> <div class="gl-kan-col"> <div class="gl-kan-h">Done</div> <div class="gl-kan-card">Spec</div> <div class="gl-kan-card">Estimate</div> <div class="gl-kan-card">Approve</div> <div class="gl-kan-card">Branch</div> </div> </div>
Live preview
Ready