Dense Packing
Dense packing with `grid-auto-flow: dense` — items fill earlier holes when later items are smaller, reducing whitespace. The "Tetris" mode of CSS Grid.
The code
<div class="gl-de"> <div class="gl-de-c1"><strong>1</strong><em>span 2</em></div> <div class="gl-de-c2"><strong>2</strong><em>span 1</em></div> <div class="gl-de-c3"><strong>3</strong><em>span 3</em></div> <div class="gl-de-c4"><strong>4</strong><em>span 1</em></div> <div class="gl-de-c5"><strong>5</strong><em>span 2</em></div> <div class="gl-de-c6"><strong>6</strong><em>span 1</em></div> <div class="gl-de-c7"><strong>7</strong><em>span 1</em></div> <div class="gl-de-c8"><strong>8</strong><em>span 2</em></div> <div class="gl-de-c9"><strong>9</strong><em>span 1</em></div> </div>
<div class="gl-de">
<div class="gl-de-c1"><strong>1</strong><em>span 2</em></div>
<div class="gl-de-c2"><strong>2</strong><em>span 1</em></div>
<div class="gl-de-c3"><strong>3</strong><em>span 3</em></div>
<div class="gl-de-c4"><strong>4</strong><em>span 1</em></div>
<div class="gl-de-c5"><strong>5</strong><em>span 2</em></div>
<div class="gl-de-c6"><strong>6</strong><em>span 1</em></div>
<div class="gl-de-c7"><strong>7</strong><em>span 1</em></div>
<div class="gl-de-c8"><strong>8</strong><em>span 2</em></div>
<div class="gl-de-c9"><strong>9</strong><em>span 1</em></div>
</div>.gl-de {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: dense;
grid-auto-rows: 90px;
gap: 10px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(132,204,22,0.14), transparent 60%),
#0a1408;
font-family: 'Inter', system-ui, sans-serif;
color: #ecfccb;
box-sizing: border-box;
align-content: start;
}
.gl-de > div {
background: linear-gradient(160deg, rgba(132,204,22,0.18), rgba(101,163,13,0.06));
border: 1px solid rgba(132,204,22,0.32);
border-radius: 10px;
padding: 12px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 4px;
}
.gl-de > div strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-de > div em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: #84cc16;
letter-spacing: 0.04em;
}
.gl-de-c1 { grid-column: span 2; }
.gl-de-c3 { grid-column: span 3; background: linear-gradient(135deg, #84cc16, #65a30d) !important; border: 0 !important; }
.gl-de-c3 em { color: rgba(255,255,255,0.7); }
.gl-de-c5 { grid-column: span 2; }
.gl-de-c8 { grid-column: span 2; background: linear-gradient(135deg, #a3e635, #84cc16) !important; border: 0 !important; color: #0a1408; }
.gl-de-c8 strong { color: #0a1408; }
.gl-de-c8 em { color: rgba(10,20,8,0.7); }
@media (max-width: 720px) {
.gl-de { grid-template-columns: repeat(3, 1fr); }
.gl-de-c3 { grid-column: span 3; }
.gl-de-c1, .gl-de-c5, .gl-de-c8 { grid-column: span 2; }
} .gl-de {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: dense;
grid-auto-rows: 90px;
gap: 10px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(132,204,22,0.14), transparent 60%),
#0a1408;
font-family: 'Inter', system-ui, sans-serif;
color: #ecfccb;
box-sizing: border-box;
align-content: start;
}
.gl-de > div {
background: linear-gradient(160deg, rgba(132,204,22,0.18), rgba(101,163,13,0.06));
border: 1px solid rgba(132,204,22,0.32);
border-radius: 10px;
padding: 12px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 4px;
}
.gl-de > div strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-de > div em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: #84cc16;
letter-spacing: 0.04em;
}
.gl-de-c1 { grid-column: span 2; }
.gl-de-c3 { grid-column: span 3; background: linear-gradient(135deg, #84cc16, #65a30d) !important; border: 0 !important; }
.gl-de-c3 em { color: rgba(255,255,255,0.7); }
.gl-de-c5 { grid-column: span 2; }
.gl-de-c8 { grid-column: span 2; background: linear-gradient(135deg, #a3e635, #84cc16) !important; border: 0 !important; color: #0a1408; }
.gl-de-c8 strong { color: #0a1408; }
.gl-de-c8 em { color: rgba(10,20,8,0.7); }
@media (max-width: 720px) {
.gl-de { grid-template-columns: repeat(3, 1fr); }
.gl-de-c3 { grid-column: span 3; }
.gl-de-c1, .gl-de-c5, .gl-de-c8 { grid-column: span 2; }
}