{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Holy Grail
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-hg { display: grid; grid-template-columns: 70px 1fr 70px; grid-template-rows: 36px 1fr 32px; grid-template-areas: "h h h" "l m r" "f f f"; gap: 6px; width: 320px; height: 220px; font-family: system-ui, sans-serif; font-size: 11px; color: #cbd5e1; } .gl-hg > * { background: #18181f; border: 1px solid rgba(124,108,255,0.25); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .gl-hg-h { grid-area: h; background: rgba(124,108,255,0.18); color: #a78bfa; } .gl-hg-l { grid-area: l; } .gl-hg-m { grid-area: m; background: #1f1f28; } .gl-hg-r { grid-area: r; } .gl-hg-f { grid-area: f; background: rgba(124,108,255,0.12); color: #a78bfa; }
<div class="gl-hg"> <header class="gl-hg-h">Header</header> <nav class="gl-hg-l">Sidebar</nav> <main class="gl-hg-m">Main content</main> <aside class="gl-hg-r">Aside</aside> <footer class="gl-hg-f">Footer</footer> </div>
Live preview
Ready