24 CSS Grid Layouts 22 / 24
Aurora Map
A landing-page region map where each block is sized by its importance and tinted with an aurora gradient.
The code
<div class="gl-au">
<div class="gl-au-blobs" aria-hidden="true"><span></span><span></span><span></span></div>
<div class="gl-au-hero">
<strong>Hero</strong><span class="gl-au-coord">grid-area: hero</span>
</div>
<div class="gl-au-feat">
<strong>Feature</strong><span class="gl-au-coord">grid-area: feat</span>
</div>
<div class="gl-au-stat">
<strong>Stat</strong><span class="gl-au-coord">grid-area: stat</span>
</div>
<div class="gl-au-side">
<strong>Sidebar</strong><span class="gl-au-coord">grid-area: side</span>
</div>
<div class="gl-au-cta"><strong>CTA</strong><span class="gl-au-coord">grid-area: cta</span></div>
</div> <div class="gl-au">
<div class="gl-au-blobs" aria-hidden="true"><span></span><span></span><span></span></div>
<div class="gl-au-hero">
<strong>Hero</strong><span class="gl-au-coord">grid-area: hero</span>
</div>
<div class="gl-au-feat">
<strong>Feature</strong><span class="gl-au-coord">grid-area: feat</span>
</div>
<div class="gl-au-stat">
<strong>Stat</strong><span class="gl-au-coord">grid-area: stat</span>
</div>
<div class="gl-au-side">
<strong>Sidebar</strong><span class="gl-au-coord">grid-area: side</span>
</div>
<div class="gl-au-cta"><strong>CTA</strong><span class="gl-au-coord">grid-area: cta</span></div>
</div>.gl-au {
position: relative;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 200px 1fr 80px;
grid-template-areas:
"hero hero side"
"feat stat side"
"cta cta cta";
gap: 14px;
width: 100%;
min-height: 480px;
padding: 18px;
background:
radial-gradient(circle at 10% 0%, #0ea5e9 0%, transparent 45%),
radial-gradient(circle at 95% 25%, #a855f7 0%, transparent 50%),
radial-gradient(circle at 50% 110%, #06b6d4 0%, transparent 50%),
radial-gradient(circle at 75% 90%, #ec4899 0%, transparent 45%),
#050a1a;
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
box-sizing: border-box;
overflow: hidden;
contain: layout paint;
}
.gl-au-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gl-au-blobs span {
position: absolute; border-radius: 50%;
filter: blur(50px);
animation: gl-au-drift 22s ease-in-out infinite alternate;
}
.gl-au-blobs span:nth-child(1) { top: 10%; left: 15%; width: 320px; height: 320px; background: radial-gradient(circle, #38bdf8 0%, transparent 70%); opacity: 0.7; }
.gl-au-blobs span:nth-child(2) { top: 30%; right: 15%; width: 320px; height: 320px; background: radial-gradient(circle, #c084fc 0%, transparent 70%); animation-delay: -6s; opacity: 0.7; }
.gl-au-blobs span:nth-child(3) { bottom: 5%; left: 40%; width: 360px; height: 360px; background: radial-gradient(circle, #22d3ee 0%, transparent 70%); animation-delay: -12s; opacity: 0.7; }
@keyframes gl-au-drift {
0% { transform: translate(0,0) scale(1); }
50% { transform: translate(40px,-30px) scale(1.08); }
100% { transform: translate(-40px,40px) scale(0.94); }
}
.gl-au > div {
position: relative; z-index: 1;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 14px;
padding: 16px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 6px;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
.gl-au > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-au-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.04em;
align-self: flex-start;
padding: 3px 8px; border-radius: 999px;
background: rgba(56,189,248,0.18); color: #93c5fd;
}
.gl-au-hero { grid-area: hero; background: linear-gradient(135deg, rgba(56,189,248,0.32), rgba(129,140,248,0.18)); }
.gl-au-feat { grid-area: feat; }
.gl-au-stat { grid-area: stat; background: linear-gradient(160deg, rgba(34,211,238,0.28), rgba(34,211,238,0.06)); }
.gl-au-side { grid-area: side; background: linear-gradient(180deg, rgba(129,140,248,0.28), rgba(129,140,248,0.06)); }
.gl-au-cta { grid-area: cta; background: linear-gradient(90deg, #38bdf8, #818cf8); }
.gl-au-cta strong { color: #050a1a; }
.gl-au-cta .gl-au-coord { background: rgba(5,10,26,0.25); color: #050a1a; }
@media (max-width: 720px) {
.gl-au {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
grid-template-areas: "hero" "feat" "stat" "side" "cta";
}
}
@media (prefers-reduced-motion: reduce) {
.gl-au-blobs span { animation: none; }
} .gl-au {
position: relative;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 200px 1fr 80px;
grid-template-areas:
"hero hero side"
"feat stat side"
"cta cta cta";
gap: 14px;
width: 100%;
min-height: 480px;
padding: 18px;
background:
radial-gradient(circle at 10% 0%, #0ea5e9 0%, transparent 45%),
radial-gradient(circle at 95% 25%, #a855f7 0%, transparent 50%),
radial-gradient(circle at 50% 110%, #06b6d4 0%, transparent 50%),
radial-gradient(circle at 75% 90%, #ec4899 0%, transparent 45%),
#050a1a;
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
box-sizing: border-box;
overflow: hidden;
contain: layout paint;
}
.gl-au-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gl-au-blobs span {
position: absolute; border-radius: 50%;
filter: blur(50px);
animation: gl-au-drift 22s ease-in-out infinite alternate;
}
.gl-au-blobs span:nth-child(1) { top: 10%; left: 15%; width: 320px; height: 320px; background: radial-gradient(circle, #38bdf8 0%, transparent 70%); opacity: 0.7; }
.gl-au-blobs span:nth-child(2) { top: 30%; right: 15%; width: 320px; height: 320px; background: radial-gradient(circle, #c084fc 0%, transparent 70%); animation-delay: -6s; opacity: 0.7; }
.gl-au-blobs span:nth-child(3) { bottom: 5%; left: 40%; width: 360px; height: 360px; background: radial-gradient(circle, #22d3ee 0%, transparent 70%); animation-delay: -12s; opacity: 0.7; }
@keyframes gl-au-drift {
0% { transform: translate(0,0) scale(1); }
50% { transform: translate(40px,-30px) scale(1.08); }
100% { transform: translate(-40px,40px) scale(0.94); }
}
.gl-au > div {
position: relative; z-index: 1;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 14px;
padding: 16px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 6px;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
.gl-au > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-au-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.04em;
align-self: flex-start;
padding: 3px 8px; border-radius: 999px;
background: rgba(56,189,248,0.18); color: #93c5fd;
}
.gl-au-hero { grid-area: hero; background: linear-gradient(135deg, rgba(56,189,248,0.32), rgba(129,140,248,0.18)); }
.gl-au-feat { grid-area: feat; }
.gl-au-stat { grid-area: stat; background: linear-gradient(160deg, rgba(34,211,238,0.28), rgba(34,211,238,0.06)); }
.gl-au-side { grid-area: side; background: linear-gradient(180deg, rgba(129,140,248,0.28), rgba(129,140,248,0.06)); }
.gl-au-cta { grid-area: cta; background: linear-gradient(90deg, #38bdf8, #818cf8); }
.gl-au-cta strong { color: #050a1a; }
.gl-au-cta .gl-au-coord { background: rgba(5,10,26,0.25); color: #050a1a; }
@media (max-width: 720px) {
.gl-au {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
grid-template-areas: "hero" "feat" "stat" "side" "cta";
}
}
@media (prefers-reduced-motion: reduce) {
.gl-au-blobs span { animation: none; }
}