Asymmetric Splash
Asymmetric magazine splash — one massive hero block, one tall column, three small thumbnails. Built with explicit `grid-row` / `grid-column` spans so every region has its coordinates visible.
The code
<div class="gl-as"> <div class="gl-as-hero"><strong>Hero</strong><span class="gl-as-coord">1 / 1 / 3 / 4</span></div> <div class="gl-as-tall"><strong>Tall</strong><span class="gl-as-coord">1 / 4 / 4 / 5</span></div> <div class="gl-as-t1"><strong>Thumb 1</strong><span class="gl-as-coord">3 / 1 / 4 / 2</span></div> <div class="gl-as-t2"><strong>Thumb 2</strong><span class="gl-as-coord">3 / 2 / 4 / 3</span></div> <div class="gl-as-t3"><strong>Thumb 3</strong><span class="gl-as-coord">3 / 3 / 4 / 4</span></div> </div>
<div class="gl-as">
<div class="gl-as-hero"><strong>Hero</strong><span class="gl-as-coord">1 / 1 / 3 / 4</span></div>
<div class="gl-as-tall"><strong>Tall</strong><span class="gl-as-coord">1 / 4 / 4 / 5</span></div>
<div class="gl-as-t1"><strong>Thumb 1</strong><span class="gl-as-coord">3 / 1 / 4 / 2</span></div>
<div class="gl-as-t2"><strong>Thumb 2</strong><span class="gl-as-coord">3 / 2 / 4 / 3</span></div>
<div class="gl-as-t3"><strong>Thumb 3</strong><span class="gl-as-coord">3 / 3 / 4 / 4</span></div>
</div>.gl-as {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 80% 0%, rgba(236,72,153,0.16), transparent 60%),
#1a0617;
font-family: 'Inter', system-ui, sans-serif;
color: #fce7f3;
box-sizing: border-box;
}
.gl-as > div {
border-radius: 14px;
padding: 16px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 6px;
}
.gl-as > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-as-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; letter-spacing: 0.04em;
align-self: flex-start;
padding: 3px 8px; border-radius: 999px;
}
.gl-as-hero { grid-area: 1 / 1 / 3 / 4; background: linear-gradient(135deg, #ec4899, #be185d); }
.gl-as-hero .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-tall { grid-area: 1 / 4 / 4 / 5; background: linear-gradient(180deg, #be185d, #831843); }
.gl-as-tall .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-t1 { grid-area: 3 / 1 / 4 / 2; background: rgba(236,72,153,0.14); border: 1px solid rgba(236,72,153,0.32); }
.gl-as-t1 .gl-as-coord, .gl-as-t2 .gl-as-coord, .gl-as-t3 .gl-as-coord { background: rgba(236,72,153,0.18); color: #f472b6; }
.gl-as-t2 { grid-area: 3 / 2 / 4 / 3; background: rgba(236,72,153,0.22); border: 1px solid rgba(236,72,153,0.4); }
.gl-as-t3 { grid-area: 3 / 3 / 4 / 4; background: rgba(236,72,153,0.32); border: 1px solid rgba(236,72,153,0.5); }
@media (max-width: 720px) {
.gl-as {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
.gl-as-hero { grid-area: 1 / 1 / 2 / 3; min-height: 160px; }
.gl-as-tall { grid-area: 2 / 1 / 3 / 3; min-height: 120px; }
.gl-as-t1 { grid-area: 3 / 1 / 4 / 2; }
.gl-as-t2 { grid-area: 3 / 2 / 4 / 3; }
.gl-as-t3 { display: none; }
} .gl-as {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 80% 0%, rgba(236,72,153,0.16), transparent 60%),
#1a0617;
font-family: 'Inter', system-ui, sans-serif;
color: #fce7f3;
box-sizing: border-box;
}
.gl-as > div {
border-radius: 14px;
padding: 16px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 6px;
}
.gl-as > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-as-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; letter-spacing: 0.04em;
align-self: flex-start;
padding: 3px 8px; border-radius: 999px;
}
.gl-as-hero { grid-area: 1 / 1 / 3 / 4; background: linear-gradient(135deg, #ec4899, #be185d); }
.gl-as-hero .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-tall { grid-area: 1 / 4 / 4 / 5; background: linear-gradient(180deg, #be185d, #831843); }
.gl-as-tall .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-t1 { grid-area: 3 / 1 / 4 / 2; background: rgba(236,72,153,0.14); border: 1px solid rgba(236,72,153,0.32); }
.gl-as-t1 .gl-as-coord, .gl-as-t2 .gl-as-coord, .gl-as-t3 .gl-as-coord { background: rgba(236,72,153,0.18); color: #f472b6; }
.gl-as-t2 { grid-area: 3 / 2 / 4 / 3; background: rgba(236,72,153,0.22); border: 1px solid rgba(236,72,153,0.4); }
.gl-as-t3 { grid-area: 3 / 3 / 4 / 4; background: rgba(236,72,153,0.32); border: 1px solid rgba(236,72,153,0.5); }
@media (max-width: 720px) {
.gl-as {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
.gl-as-hero { grid-area: 1 / 1 / 2 / 3; min-height: 160px; }
.gl-as-tall { grid-area: 2 / 1 / 3 / 3; min-height: 120px; }
.gl-as-t1 { grid-area: 3 / 1 / 4 / 2; }
.gl-as-t2 { grid-area: 3 / 2 / 4 / 3; }
.gl-as-t3 { display: none; }
}