{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Pinterest Masonry
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-mas { columns: 3; column-gap: 6px; width: 320px; font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700; color: #fff; } .gl-mas-i { break-inside: avoid; margin-bottom: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
<div class="gl-mas"> <div class="gl-mas-i" style="height:48px;background:linear-gradient(135deg,#7c6cff,#a78bfa)">A</div> <div class="gl-mas-i" style="height:80px;background:linear-gradient(135deg,#ff6c8a,#ff9a76)">B</div> <div class="gl-mas-i" style="height:64px;background:linear-gradient(135deg,#2eb88a,#3de8aa)">C</div> <div class="gl-mas-i" style="height:96px;background:linear-gradient(135deg,#3de8f5,#5aa0e0)">D</div> <div class="gl-mas-i" style="height:48px;background:linear-gradient(135deg,#f5a84a,#ffd479)">E</div> <div class="gl-mas-i" style="height:64px;background:linear-gradient(135deg,#a78bfa,#cbb8ff)">F</div> <div class="gl-mas-i" style="height:72px;background:linear-gradient(135deg,#ff6c8a,#a78bfa)">G</div> <div class="gl-mas-i" style="height:48px;background:linear-gradient(135deg,#2eb88a,#a78bfa)">H</div> <div class="gl-mas-i" style="height:80px;background:linear-gradient(135deg,#7c6cff,#3de8f5)">I</div> </div>
Live preview
Ready