Back to CSS Grid Layouts Logo Wall Pure CSS
Share
HTML
<div class="gl-lw">
  <header class="gl-lw-head">
    <strong>Trusted by 14,000+ teams</strong>
    <span class="gl-lw-coord">repeat(auto-fit, minmax(140px, 1fr))</span>
  </header>
  <div class="gl-lw-grid">
    <div class="gl-lw-cell">◇ NORTHWIND</div>
    <div class="gl-lw-cell">▲ APEX.IO</div>
    <div class="gl-lw-cell">★ PULSE</div>
    <div class="gl-lw-cell">⬣ HEXLAB</div>
    <div class="gl-lw-cell">◯ ORBITA</div>
    <div class="gl-lw-cell">◤ FLINT</div>
    <div class="gl-lw-cell">⬢ MERIDIAN</div>
    <div class="gl-lw-cell">◇ NIMBUS</div>
    <div class="gl-lw-cell">▼ DRIFT</div>
    <div class="gl-lw-cell">◎ ATLAS</div>
  </div>
</div>
CSS
.gl-lw {
  display: flex; flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(148,163,184,0.12), transparent 60%),
    #0c1220;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e2e8f0;
  box-sizing: border-box;
  justify-content: center;
}
.gl-lw-head {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.gl-lw-head strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-lw-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(148,163,184,0.14); color: #94a3b8;
}
.gl-lw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.gl-lw-cell {
  background: rgba(148,163,184,0.06);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 10px;
  padding: 22px 14px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  color: #94a3b8;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.gl-lw-cell:hover {
  color: #38bdf8; border-color: #38bdf8;
  background: rgba(56,189,248,0.08);
}
@media (prefers-reduced-motion: reduce) {
  .gl-lw-cell { transition: none; }
}