{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Bento Box
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 60px); gap: 6px; width: 320px; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 600; color: #f0eeff; } .gl-bento > * { background: #18181f; border: 1px solid rgba(167,139,250,0.25); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .gl-bento-1 { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; font-size: 13px; } .gl-bento-2 { grid-column: span 2; background: rgba(46,184,138,0.18); color: #2eb88a; } .gl-bento-3 { grid-column: span 1; } .gl-bento-4 { grid-column: span 1; background: rgba(245,168,74,0.18); color: #f5a84a; } .gl-bento-5 { grid-column: span 2; background: rgba(255,108,138,0.18); color: #ff6c8a; } .gl-bento-6 { grid-column: span 2; }
<div class="gl-bento"> <div class="gl-bento-1">Feature</div> <div class="gl-bento-2">Stats</div> <div class="gl-bento-3">Activity</div> <div class="gl-bento-4">Tip</div> <div class="gl-bento-5">Trend</div> <div class="gl-bento-6">Note</div> </div>
Live preview
Ready