Mosaic Photo Wall
Mosaic of mixed-size cells — a 4×4 base with hero / wide / tall / square shapes spanning multiple tracks. The "feature wall" pattern from photography sites and gallery landings.
The code
<div class="gl-ms"> <div class="gl-ms-1"><strong>Hero</strong><span class="gl-ms-coord">span 2 × 2</span></div> <div class="gl-ms-2"><strong>Wide</strong><span class="gl-ms-coord">span 2 × 1</span></div> <div class="gl-ms-3"><strong>Tall</strong><span class="gl-ms-coord">span 1 × 2</span></div> <div class="gl-ms-4"><strong>1</strong><span class="gl-ms-coord">1 × 1</span></div> <div class="gl-ms-5"><strong>2</strong><span class="gl-ms-coord">1 × 1</span></div> <div class="gl-ms-6"><strong>Banner</strong><span class="gl-ms-coord">span 4 × 1</span></div> </div>
<div class="gl-ms">
<div class="gl-ms-1"><strong>Hero</strong><span class="gl-ms-coord">span 2 × 2</span></div>
<div class="gl-ms-2"><strong>Wide</strong><span class="gl-ms-coord">span 2 × 1</span></div>
<div class="gl-ms-3"><strong>Tall</strong><span class="gl-ms-coord">span 1 × 2</span></div>
<div class="gl-ms-4"><strong>1</strong><span class="gl-ms-coord">1 × 1</span></div>
<div class="gl-ms-5"><strong>2</strong><span class="gl-ms-coord">1 × 1</span></div>
<div class="gl-ms-6"><strong>Banner</strong><span class="gl-ms-coord">span 4 × 1</span></div>
</div>.gl-ms {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
gap: 12px;
width: 100%;
min-height: 480px;
padding: 22px;
background: #1a0e0a;
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
box-sizing: border-box;
align-content: start;
}
.gl-ms > div {
border-radius: 14px;
padding: 16px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 6px;
}
.gl-ms > div strong { font-size: 16px; font-weight: 700; }
.gl-ms-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.04em;
align-self: flex-start;
padding: 2px 8px; border-radius: 999px;
background: rgba(0,0,0,0.25); color: #fff;
}
.gl-ms-1 { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #f97316, #dc2626); }
.gl-ms-2 { grid-column: span 2; background: linear-gradient(135deg, #fbbf24, #f97316); }
.gl-ms-3 { grid-row: span 2; background: linear-gradient(180deg, #ec4899, #be185d); }
.gl-ms-4 { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.gl-ms-5 { background: linear-gradient(135deg, #d946ef, #a21caf); }
.gl-ms-6 { grid-column: span 4; background: linear-gradient(90deg, #c026d3, #ec4899, #f97316); } .gl-ms {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
gap: 12px;
width: 100%;
min-height: 480px;
padding: 22px;
background: #1a0e0a;
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
box-sizing: border-box;
align-content: start;
}
.gl-ms > div {
border-radius: 14px;
padding: 16px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 6px;
}
.gl-ms > div strong { font-size: 16px; font-weight: 700; }
.gl-ms-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.04em;
align-self: flex-start;
padding: 2px 8px; border-radius: 999px;
background: rgba(0,0,0,0.25); color: #fff;
}
.gl-ms-1 { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #f97316, #dc2626); }
.gl-ms-2 { grid-column: span 2; background: linear-gradient(135deg, #fbbf24, #f97316); }
.gl-ms-3 { grid-row: span 2; background: linear-gradient(180deg, #ec4899, #be185d); }
.gl-ms-4 { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.gl-ms-5 { background: linear-gradient(135deg, #d946ef, #a21caf); }
.gl-ms-6 { grid-column: span 4; background: linear-gradient(90deg, #c026d3, #ec4899, #f97316); }