{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Mosaic Photo Wall
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-mos { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50px; gap: 5px; width: 320px; font-family: system-ui, sans-serif; font-weight: 700; font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .gl-mos > * { display: flex; align-items: center; justify-content: center; border-radius: 5px; } .gl-mos-1 { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #7c6cff, #a78bfa); } .gl-mos-2 { grid-column: span 2; grid-row: span 3; background: linear-gradient(135deg, #ff6c8a, #ff9a76); } .gl-mos-3 { background: linear-gradient(135deg, #2eb88a, #3de8aa); } .gl-mos-4 { background: linear-gradient(135deg, #f5a84a, #ffd479); } .gl-mos-5 { grid-column: span 2; background: linear-gradient(135deg, #3de8f5, #5aa0e0); } .gl-mos-6 { background: linear-gradient(135deg, #a78bfa, #cbb8ff); } .gl-mos-7 { background: linear-gradient(135deg, #ff6c8a, #a78bfa); }
<div class="gl-mos"> <div class="gl-mos-1">L</div> <div class="gl-mos-2">P</div> <div class="gl-mos-3">S</div> <div class="gl-mos-4">S</div> <div class="gl-mos-5">W</div> <div class="gl-mos-6">S</div> <div class="gl-mos-7">S</div> </div>
Live preview
Ready