Back to CSS Grid Layouts Dense Packing Pure CSS
Share
HTML
<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>
CSS
.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; }
}