{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Logo Wall
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-logo { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); place-items: center; gap: 4px; width: 320px; padding: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,108,255,0.18); border-radius: 8px; font-family: Georgia, serif; font-size: 13px; font-weight: 700; font-style: italic; } .gl-logo > div { width: 100%; padding: 12px 6px; text-align: center; color: #b8b6d4; filter: grayscale(1); opacity: 0.7; transition: filter 0.25s, opacity 0.25s, color 0.25s; } .gl-logo > div:hover { filter: grayscale(0); opacity: 1; color: #a78bfa; }
<div class="gl-logo"> <div>Acme</div> <div>Globex</div> <div>Initech</div> <div>Hooli</div> <div>Pied</div> <div>Stark</div> <div>Wayne</div> <div>Umbrella</div> </div>
Live preview
Ready