{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Dense Packing
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-dense { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 46px; grid-auto-flow: dense; gap: 5px; width: 320px; font-family: monospace; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .gl-dense > * { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7c6cff, #a78bfa); border-radius: 5px; } .gl-dense-x { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #ff6c8a, #ff9a76); font-size: 18px; }
<div class="gl-dense"> <div class="gl-dense-x">A</div> <div>B</div> <div>C</div> <div>D</div> <div class="gl-dense-x">E</div> <div>F</div> <div>G</div> <div>H</div> <div>I</div> </div>
Live preview
Ready