{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Asymmetric Splash
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-spl { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: repeat(3, 60px); gap: 6px; width: 320px; font-family: system-ui, sans-serif; font-weight: 700; color: #fff; } .gl-spl > * { display: flex; align-items: center; justify-content: center; border-radius: 6px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .gl-spl-hero { grid-row: span 3; background: linear-gradient(135deg, #7c6cff, #ff6c8a); font-size: 22px; letter-spacing: 0.08em; } .gl-spl-a { background: linear-gradient(135deg, #2eb88a, #3de8aa); grid-column: span 2; } .gl-spl-b { background: linear-gradient(135deg, #f5a84a, #ffd479); } .gl-spl-c { background: linear-gradient(135deg, #3de8f5, #5aa0e0); } .gl-spl-d { background: linear-gradient(135deg, #a78bfa, #cbb8ff); grid-column: span 2; }
<div class="gl-spl"> <div class="gl-spl-hero">HERO</div> <div class="gl-spl-a">A</div> <div class="gl-spl-b">B</div> <div class="gl-spl-c">C</div> <div class="gl-spl-d">D</div> </div>
Live preview
Ready