ShapedGrid

Honeycomb grid with CSS

Alternating rows offset by half an item, in plain CSS Grid. Adjust it below and copy the code. How it works ↓

☕ Support

Preview 0 items

Code

Area names

How it works

A honeycomb alternates long and short rows, and every short row sits half an item to the side, in the gaps of the rows around it. You don't need transforms, negative margins or absolute positioning for that. The grid gets two columns for every item in the widest row, and every item spans two columns. A short row then starts one column later than a long one, and one column is exactly half an item.

In Compact mode only the first item of each short row needs a placement rule. Auto-placement puts the others after it. Below 600px the example switches to narrower rows with a media query.

For hexagon-shaped items, add a clip-path to the item, for example clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%), and lower the gap so the rows sit closer together.

The code

This is the HTML + CSS the generator above produces for this layout (Compact mode). Change the items, the rows or the class name and copy your own version. Named areas and row wrappers are one click away. 

<style>
.honeycomb-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.5rem;
  justify-items: center;
}

.honeycomb-item {
  grid-column: span 2;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #22c55e;
  color: #022c22;
  font-weight: 600;
  font-size: 0.85rem;
}

@media (min-width: 600px) {
  /* Where each row starts; the other items flow after it */
  .honeycomb-grid > :nth-child(5) { grid-column: 2 / span 2; }
  .honeycomb-grid > :nth-child(8) { grid-column: 1 / span 2; }
}

@media (max-width: 599.98px) {
  .honeycomb-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .honeycomb-grid > :nth-child(4) { grid-column: 2 / span 2; }
  .honeycomb-grid > :nth-child(6) { grid-column: 1 / span 2; }
}
</style>

<div class="honeycomb-grid">
  <div class="honeycomb-item">1</div>
  <div class="honeycomb-item">2</div>
  <div class="honeycomb-item">3</div>
  <div class="honeycomb-item">4</div>
  <div class="honeycomb-item">5</div>
  <div class="honeycomb-item">6</div>
  <div class="honeycomb-item">7</div>
  <div class="honeycomb-item">8</div>
  <div class="honeycomb-item">9</div>
  <div class="honeycomb-item">10</div>
  <div class="honeycomb-item">11</div>
</div>

More shapes