{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Hexagonal Honeycomb
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-hex { display: grid; grid-template-columns: repeat(4, 60px); gap: 4px; width: 256px; } .gl-hex > div { width: 60px; height: 68px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(135deg, #7c6cff, #a78bfa); margin-bottom: -16px; transition: transform 0.2s, background 0.2s; } .gl-hex > div:nth-child(odd) { background: linear-gradient(135deg, #a78bfa, #cbb8ff); } .gl-hex-r2 { transform: translateX(32px); } .gl-hex > div:hover { background: linear-gradient(135deg, #ff6c8a, #ff9a76); transform: scale(1.08); } .gl-hex .gl-hex-r2:hover { transform: translateX(32px) scale(1.08); }
<div class="gl-hex"> <div></div><div></div><div></div><div></div> <div class="gl-hex-r2"></div><div class="gl-hex-r2"></div><div class="gl-hex-r2"></div> <div></div><div></div><div></div><div></div> </div>
Live preview
Ready