Hexagonal Honeycomb
Hexagon honeycomb tiling — alternating offset rows on a CSS Grid base, each cell shaped with `clip-path: polygon()`. The math falls out of the grid track widths; no transforms needed.
The code
<div class="gl-hex">
<div class="gl-hex-row">
<span class="gl-hex-cell"><strong>A1</strong><em>row 1</em></span>
<span class="gl-hex-cell"><strong>A2</strong><em>row 1</em></span>
<span class="gl-hex-cell"><strong>A3</strong><em>row 1</em></span>
<span class="gl-hex-cell"><strong>A4</strong><em>row 1</em></span>
</div>
<div class="gl-hex-row gl-hex-shift">
<span class="gl-hex-cell"><strong>B1</strong><em>row 2</em></span>
<span class="gl-hex-cell"><strong>B2</strong><em>row 2</em></span>
<span class="gl-hex-cell"><strong>B3</strong><em>row 2</em></span>
</div>
<div class="gl-hex-row">
<span class="gl-hex-cell"><strong>C1</strong><em>row 3</em></span>
<span class="gl-hex-cell"><strong>C2</strong><em>row 3</em></span>
<span class="gl-hex-cell"><strong>C3</strong><em>row 3</em></span>
<span class="gl-hex-cell"><strong>C4</strong><em>row 3</em></span>
</div>
<div class="gl-hex-row gl-hex-shift">
<span class="gl-hex-cell"><strong>D1</strong><em>row 4</em></span>
<span class="gl-hex-cell"><strong>D2</strong><em>row 4</em></span>
<span class="gl-hex-cell"><strong>D3</strong><em>row 4</em></span>
</div>
</div> <div class="gl-hex">
<div class="gl-hex-row">
<span class="gl-hex-cell"><strong>A1</strong><em>row 1</em></span>
<span class="gl-hex-cell"><strong>A2</strong><em>row 1</em></span>
<span class="gl-hex-cell"><strong>A3</strong><em>row 1</em></span>
<span class="gl-hex-cell"><strong>A4</strong><em>row 1</em></span>
</div>
<div class="gl-hex-row gl-hex-shift">
<span class="gl-hex-cell"><strong>B1</strong><em>row 2</em></span>
<span class="gl-hex-cell"><strong>B2</strong><em>row 2</em></span>
<span class="gl-hex-cell"><strong>B3</strong><em>row 2</em></span>
</div>
<div class="gl-hex-row">
<span class="gl-hex-cell"><strong>C1</strong><em>row 3</em></span>
<span class="gl-hex-cell"><strong>C2</strong><em>row 3</em></span>
<span class="gl-hex-cell"><strong>C3</strong><em>row 3</em></span>
<span class="gl-hex-cell"><strong>C4</strong><em>row 3</em></span>
</div>
<div class="gl-hex-row gl-hex-shift">
<span class="gl-hex-cell"><strong>D1</strong><em>row 4</em></span>
<span class="gl-hex-cell"><strong>D2</strong><em>row 4</em></span>
<span class="gl-hex-cell"><strong>D3</strong><em>row 4</em></span>
</div>
</div>.gl-hex {
display: flex; flex-direction: column; gap: 6px;
width: 100%;
min-height: 480px;
padding: 28px 18px;
background:
radial-gradient(60% 60% at 50% 50%, rgba(217,119,6,0.14), transparent 60%),
#14110a;
font-family: 'Inter', system-ui, sans-serif;
color: #fef3c7;
box-sizing: border-box;
align-items: center; justify-content: center;
overflow: hidden;
}
.gl-hex-row {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 8px;
width: 424px;
margin-left: 0;
}
.gl-hex-shift {
grid-template-columns: repeat(3, 100px);
padding-left: 54px;
width: 424px;
}
.gl-hex-row + .gl-hex-row { margin-top: -28px; }
.gl-hex-cell {
width: 100px; height: 110px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: linear-gradient(160deg, #d97706, #f59e0b);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 2px;
color: #14110a;
cursor: pointer;
transition: transform 0.22s cubic-bezier(.22,1,.36,1),
filter 0.22s ease;
will-change: transform, filter;
}
.gl-hex-cell:hover,
.gl-hex-cell:focus-visible {
transform: translateY(-4px) scale(1.06);
filter: drop-shadow(0 6px 14px rgba(251, 191, 36, 0.55))
drop-shadow(0 2px 4px rgba(217, 119, 6, 0.4))
brightness(1.15);
z-index: 2;
outline: none;
}
.gl-hex-cell strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.gl-hex-cell em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px; letter-spacing: 0.02em;
color: rgba(20,17,10,0.65);
}
.gl-hex-row:nth-child(1) .gl-hex-cell { background: linear-gradient(160deg, #f59e0b, #fbbf24); }
.gl-hex-row:nth-child(2) .gl-hex-cell { background: linear-gradient(160deg, #d97706, #f59e0b); }
.gl-hex-row:nth-child(3) .gl-hex-cell { background: linear-gradient(160deg, #b45309, #d97706); }
.gl-hex-row:nth-child(4) .gl-hex-cell { background: linear-gradient(160deg, #92400e, #b45309); color: #fef3c7; }
.gl-hex-row:nth-child(4) .gl-hex-cell em { color: rgba(254,243,199,0.7); }
.gl-hex-row { position: relative; }
.gl-hex-cell:hover { position: relative; }
@media (prefers-reduced-motion: reduce) {
.gl-hex-cell { transition: none; }
.gl-hex-cell:hover, .gl-hex-cell:focus-visible { transform: none; }
}
@media (max-width: 720px) {
.gl-hex-row { grid-template-columns: repeat(3, 80px); width: 256px; padding-left: 0; }
.gl-hex-shift { grid-template-columns: repeat(2, 80px); padding-left: 44px; width: 256px; }
.gl-hex-cell { width: 80px; height: 90px; }
.gl-hex-row + .gl-hex-row { margin-top: -22px; }
} .gl-hex {
display: flex; flex-direction: column; gap: 6px;
width: 100%;
min-height: 480px;
padding: 28px 18px;
background:
radial-gradient(60% 60% at 50% 50%, rgba(217,119,6,0.14), transparent 60%),
#14110a;
font-family: 'Inter', system-ui, sans-serif;
color: #fef3c7;
box-sizing: border-box;
align-items: center; justify-content: center;
overflow: hidden;
}
.gl-hex-row {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 8px;
width: 424px;
margin-left: 0;
}
.gl-hex-shift {
grid-template-columns: repeat(3, 100px);
padding-left: 54px;
width: 424px;
}
.gl-hex-row + .gl-hex-row { margin-top: -28px; }
.gl-hex-cell {
width: 100px; height: 110px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: linear-gradient(160deg, #d97706, #f59e0b);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 2px;
color: #14110a;
cursor: pointer;
transition: transform 0.22s cubic-bezier(.22,1,.36,1),
filter 0.22s ease;
will-change: transform, filter;
}
.gl-hex-cell:hover,
.gl-hex-cell:focus-visible {
transform: translateY(-4px) scale(1.06);
filter: drop-shadow(0 6px 14px rgba(251, 191, 36, 0.55))
drop-shadow(0 2px 4px rgba(217, 119, 6, 0.4))
brightness(1.15);
z-index: 2;
outline: none;
}
.gl-hex-cell strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.gl-hex-cell em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px; letter-spacing: 0.02em;
color: rgba(20,17,10,0.65);
}
.gl-hex-row:nth-child(1) .gl-hex-cell { background: linear-gradient(160deg, #f59e0b, #fbbf24); }
.gl-hex-row:nth-child(2) .gl-hex-cell { background: linear-gradient(160deg, #d97706, #f59e0b); }
.gl-hex-row:nth-child(3) .gl-hex-cell { background: linear-gradient(160deg, #b45309, #d97706); }
.gl-hex-row:nth-child(4) .gl-hex-cell { background: linear-gradient(160deg, #92400e, #b45309); color: #fef3c7; }
.gl-hex-row:nth-child(4) .gl-hex-cell em { color: rgba(254,243,199,0.7); }
.gl-hex-row { position: relative; }
.gl-hex-cell:hover { position: relative; }
@media (prefers-reduced-motion: reduce) {
.gl-hex-cell { transition: none; }
.gl-hex-cell:hover, .gl-hex-cell:focus-visible { transform: none; }
}
@media (max-width: 720px) {
.gl-hex-row { grid-template-columns: repeat(3, 80px); width: 256px; padding-left: 0; }
.gl-hex-shift { grid-template-columns: repeat(2, 80px); padding-left: 44px; width: 256px; }
.gl-hex-cell { width: 80px; height: 90px; }
.gl-hex-row + .gl-hex-row { margin-top: -22px; }
}