Holy Grail
The classic five-region web layout — header, sidebar, main, aside, footer — built with `grid-template-areas` so the markup reads like the visual. Three named columns let you swap left/right widths in one place.
The code
<div class="gl-hg">
<header class="gl-hg-h">
<span class="gl-hg-name">Header</span>
<span class="gl-hg-tag">grid-area: h</span>
</header>
<nav class="gl-hg-l">
<span class="gl-hg-name">Sidebar</span>
<span class="gl-hg-tag">grid-area: l</span>
</nav>
<main class="gl-hg-m">
<span class="gl-hg-name">Main content</span>
<span class="gl-hg-tag">grid-area: m</span>
</main>
<aside class="gl-hg-r">
<span class="gl-hg-name">Aside</span>
<span class="gl-hg-tag">grid-area: r</span>
</aside>
<footer class="gl-hg-f">
<span class="gl-hg-name">Footer</span>
<span class="gl-hg-tag">grid-area: f</span>
</footer>
</div> <div class="gl-hg">
<header class="gl-hg-h">
<span class="gl-hg-name">Header</span>
<span class="gl-hg-tag">grid-area: h</span>
</header>
<nav class="gl-hg-l">
<span class="gl-hg-name">Sidebar</span>
<span class="gl-hg-tag">grid-area: l</span>
</nav>
<main class="gl-hg-m">
<span class="gl-hg-name">Main content</span>
<span class="gl-hg-tag">grid-area: m</span>
</main>
<aside class="gl-hg-r">
<span class="gl-hg-name">Aside</span>
<span class="gl-hg-tag">grid-area: r</span>
</aside>
<footer class="gl-hg-f">
<span class="gl-hg-name">Footer</span>
<span class="gl-hg-tag">grid-area: f</span>
</footer>
</div>.gl-hg {
display: grid;
grid-template-columns: 180px 1fr 180px;
grid-template-rows: 72px 1fr 56px;
grid-template-areas:
"h h h"
"l m r"
"f f f";
gap: 12px;
width: 100%;
min-height: 480px;
padding: 18px;
background:
radial-gradient(60% 80% at 80% 0%, rgba(16,185,129,0.12), transparent 60%),
#051512;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
color: #d1fae5;
box-sizing: border-box;
}
.gl-hg > * {
background: #0d2620;
border: 1px solid rgba(52,211,153,0.22);
border-radius: 10px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
padding: 12px;
text-align: center;
}
.gl-hg-name { font-size: 13px; font-weight: 600; color: #ecfdf5; }
.gl-hg-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.04em;
padding: 3px 8px; border-radius: 999px;
background: rgba(16,185,129,0.14); color: #34d399;
}
.gl-hg-h { grid-area: h; background: linear-gradient(135deg, #10b981, #34d399); border-color: transparent; }
.gl-hg-h .gl-hg-name { color: #051512; }
.gl-hg-h .gl-hg-tag { background: rgba(5,21,18,0.25); color: #051512; }
.gl-hg-l { grid-area: l; }
.gl-hg-m { grid-area: m; background: #14302a; }
.gl-hg-r { grid-area: r; }
.gl-hg-f { grid-area: f; background: rgba(16,185,129,0.12); }
@media (max-width: 720px) {
.gl-hg {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
grid-template-areas: "h" "l" "m" "r" "f";
}
} .gl-hg {
display: grid;
grid-template-columns: 180px 1fr 180px;
grid-template-rows: 72px 1fr 56px;
grid-template-areas:
"h h h"
"l m r"
"f f f";
gap: 12px;
width: 100%;
min-height: 480px;
padding: 18px;
background:
radial-gradient(60% 80% at 80% 0%, rgba(16,185,129,0.12), transparent 60%),
#051512;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
color: #d1fae5;
box-sizing: border-box;
}
.gl-hg > * {
background: #0d2620;
border: 1px solid rgba(52,211,153,0.22);
border-radius: 10px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
padding: 12px;
text-align: center;
}
.gl-hg-name { font-size: 13px; font-weight: 600; color: #ecfdf5; }
.gl-hg-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.04em;
padding: 3px 8px; border-radius: 999px;
background: rgba(16,185,129,0.14); color: #34d399;
}
.gl-hg-h { grid-area: h; background: linear-gradient(135deg, #10b981, #34d399); border-color: transparent; }
.gl-hg-h .gl-hg-name { color: #051512; }
.gl-hg-h .gl-hg-tag { background: rgba(5,21,18,0.25); color: #051512; }
.gl-hg-l { grid-area: l; }
.gl-hg-m { grid-area: m; background: #14302a; }
.gl-hg-r { grid-area: r; }
.gl-hg-f { grid-area: f; background: rgba(16,185,129,0.12); }
@media (max-width: 720px) {
.gl-hg {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
grid-template-areas: "h" "l" "m" "r" "f";
}
}